Question

我有一个我在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>';

但这样做似乎并未在href标记上生成a链接。

在angular1中，我想我需要使用$compile服务并编译HTML才能使用。我是否必须在angular2，a中做类似的事情，如果是这样的话？

我正在使用新的@angular/router而非弃用的。{/ p>

Answer 1

Angular对动态添加的HTML没有任何作用（除了清理）。

未解决任何约束（[...]，(...)，xxx="{{...}}
没有实例化的指令或组件
没有CSS视图封装模拟（未添加_ng_content_xxx属性）

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

中所解释和演示的那样

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

1 个答案: