如何使Angular 2捕获动态添加的routerLink指令

Question

正如在这个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);
    }
}

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

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

- Dethariel

---

我不确定我是否理解你想在这里做什么，但是根据你的 Plunker，我猜测你的问题是“登录”链接无法工作，对吗？如果是这样，为什么你要在本地化中使用 routerLink 而不是在模板中使用它呢？ - brians69

嘿..你是怎么解决在TypeScript类中动态添加routerlink到锚点标签的问题的？我尝试了很久创建动态组件，但没有成功。请帮帮我。 - Meenakshi Kumari

@MeenakshiKumari 我最终没有选择那条路，而是重构了我的代码，不再使用动态链接。 - Dethariel

其实我也是这么做的..谢谢.. - Meenakshi Kumari

Answer 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中演示。

- Günter Zöchbauer