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

时间:2016-08-24 09:28:23

标签: angularjs typescript angular2-routing

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

1 个答案:

答案 0 :(得分:2)

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

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

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

中所解释和演示的那样