routerLink 未使用 TS 模板语法进行编译 [英] routerLink not compiling with TS template syntax

问题描述

我有一个这样的组件http://plnkr.co/edit/mJDHZIm5IzeMB9f2IVLE:>

I have a component like this http://plnkr.co/edit/mJDHZIm5IzeMB9f2IVLE:

@Component({
  template: `
      <p [innerHTML]="link"></p>
  `,
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  { path: '/two', component: Two, name: 'Two'},
])
export class App {
  two = (text: string) => `<a [routerLink]="['/Two']">${text}</a>`;
  constructor(private _router: Router) {  }
  ngOnInit() {
    this.link = `${this.two("two")}`;
  }
}

任何想法为什么不编译 link 值或如何使其工作?目标是硬编码 url，只需更改生成链接的文本.

Any ideas why it's not compiling link value or how to make it work? The goal is to hardcode url, and just change text of the generated link.

我也试过:

two = (text: string) => `<a href="/two">${text}</a>`;

由于 HashLocationStrategy，它在带有 #/two 的 plunker 中工作，但在我的应用程序中路由器没有检测到链接和整个页面重新加载...

which works in plunker with #/two because of HashLocationStrategy, but in my app router isn't detecting the link and whole page reloads...

推荐答案

routerLink 是一个指令.指令和组件不是为添加了 innerHTML 的 HTML 创建的.

routerLink is a directive. Directives and components are not created for HTML added with innerHTML.

如果您将 link 设为 Array 而不是 string.

If you make link an Array instead of a string.

这应该有效

<p [routerLink]="link"></p>

this.link = ['Two'];

这篇关于routerLink 未使用 TS 模板语法进行编译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！