routerLink not compiling with TS template syntax

问题

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")}`;
  }
}

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.

UPDATE:

I also tried:

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

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

回答1:

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

If you make link an Array instead of a string.

This should work

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

this.link = ['Two'];

来源：https://stackoverflow.com/questions/35685342/routerlink-not-compiling-with-ts-template-syntax