Angular2 - 在指令中更改 innerHTML 时动态创建 routerLink答案

【问题标题】：Angular2 - Dynamically create routerLink when changing innerHTML in directiveAngular2 - 在指令中更改 innerHTML 时动态创建 routerLink
【发布时间】：2016-12-31 08:37:45
【问题描述】：

我在 angular2 中创建了一个指令，该指令更改了 HTML 元素的 innerHTML。这是指令的简单版本

import { Directive, ElementRef, Input, DoCheck } from '@angular/core';

@Directive({
    selector: '[fieldName]'
})

export class FieldNameDirective implements DoCheck {
    element: HTMLElement;

    @Input('fieldName')
    fieldId: number;

    cached: number;

    constructor(
        el: ElementRef,
        private moduleService: ModuleService) {
        this.element = el.nativeElement;
    }

    ngDoCheck() {
        if (this.cached != this.fieldId) {
            // store cached
            this.cached = this.fieldId;
            this.element.innerHTML = 'TEST ME';


        }
    }
}

现在我想改变这个指令，使它可以包含一个路由器链接路径，像这样

if (this.fieldId == 1)
    this.element.innerHTML = 'NORMAL TEXT';
else
    this.element.innerHTML = '<a routerLink="/path/to/go/to">TEXT WITH LINK</a>';

但是这样做似乎实际上并没有在a 标记上生成href 链接。

在 angular1 中，我想我需要使用 $compile 服务并编译 HTML 以使其工作。我是否必须在 angular2、a 中做类似的事情，如果是的话怎么做？

我使用的是新的@angular/router 而不是已弃用的。

【问题讨论】：

我也有类似的情况，请问你最后是怎么解决的？
一个可能的选项stackoverflow.com/a/49435440/943646

标签： angular typescript angular2-routing

【解决方案1】：

Angular 不会对动态添加的 HTML 做任何事情（除了清理）。

没有解决绑定（[...]、(...)、xxx="{{...}}
没有实例化指令或组件
无 CSS 视图封装模拟（不添加_ng_content_xxx 属性）

您可以使用*ngIf 来显示隐藏一个元素或另一个或
您可以使用ViewContainerRef.createComponent 动态添加组件，如Angular 2 dynamic tabs with user-click chosen components 中解释和演示的那样

【讨论】：