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

Question

如 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 指令一无所知，并且 "bind" 给它。因此，当您单击 link 时，它会导致使用 re-bootstrap 完全重新加载（这在 plunk 中不起作用，它只会给出 404）。

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

Answer 1

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

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

如果您需要动态添加使用 Angular2 绑定、指令或组件的 HTML，您可以将 HTML 添加到组件模板，然后使用 [=13= 动态添加此组件] 就像在

中展示的那样

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

How to make Angular 2 pick up dynamically added routerLink directive

typescript

angular2-directives

angular2-routing

angular