routerLink无法在TS模板语法编译 [英] routerLink not compiling with TS template syntax

问题描述

我有这样一个 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")}`;
  }
}

任何想法，为什么它没有编译链接值或如何使它工作？我们的目标是硬code的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>`;

这plunker与＃/二因为HashLocationStrategy的作品，但在我的应用程序的路由器没有检测到链路和整个页面重新加载...

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.

如果您链接的的阵列代替字符串。

这应该工作

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

   

this.link = ['Two'];

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