如何让 Angular 2 获取动态添加的 routerLink 指令答案

【问题标题】：How to make Angular 2 pick up dynamically added routerLink directive如何让 Angular 2 获取动态添加的 routerLink 指令
【发布时间】：2017-01-15 18:25:54
【问题描述】：

正如this plunker 中所见，我正在动态地将 HTML 添加到我的一个元素中，归结为：

@Component({
    selector: 'my-comp',
    template: `<span [innerHTML]="link"></span>`,
}) export class MyComponent {
    private linkContent = '<a routerLink="/my-route">GoTo Route</a>';
    private link;

    constructor(sanitizer: DomSanitizer) {
        this.link = sanitizer.bypassSecurityTrustHtml(linkContent);
    }
}

这导致 <a routerLink="/my-route">GoTo Route</a> 被添加到 DOM 中，但 Angular 对这个元素上的 routerLink 指令一无所知，并且不会“绑定”到它。因此，当您单击链接时，它会导致通过重新引导完全重新加载（这在 plunk 中不起作用，它只会给出 404）。

问题：如何告诉 Angular 遍历 DOM（或其部分，甚至单个元素）并在需要时执行组件初始化？

【问题讨论】：

我不确定我是否理解你想在这里做什么，但是，通过你的 Plunker，我猜你的问题是 login 链接不起作用，对吧？如果是这样，您为什么在本地化中使用 routerLink 而不是在模板中使用它？
嘿.. 您如何解决从类型脚本类动态添加 routerlink 到锚标记的问题。？我努力创建动态组件但没有成功。请帮帮我。
@MeenakshiKumari 我最终没有走那条路，而是将我的代码重组为没有动态链接
其实我也是这样做的..谢谢..

标签： angular typescript angular2-routing angular2-directives

【解决方案1】：

Angular2 不处理以任何方式动态添加的 HTML，除了清理。

将'<a routerLink="/my-route">GoTo Route</a>' 传递给innerHTML 正是这样做的，将这个字符串传递给DOM，但仅此而已。没有实例化或应用 routerLink 指令。

如果您需要动态添加使用 Angular2 绑定、指令或组件的 HTML，您可以将 HTML 添加到组件模板中，并使用 ViewContainerRef.createComponent() 动态添加此组件，如 Angular 2 dynamic tabs with user-click chosen components 中的示例所示

【讨论】：