Angular2 - ディレクティブでinnerHTMLを変更するときにrouterLinkを動的に作成する

Question

HTML要素のinnerHTMLを変更するangular2で作成したディレクティブがあります。ここでディレクティブの簡易版

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リンクを生成します。

ang1では、私は$compileサービスを使用し、それを動作させるためにHTMLをコンパイルする必要があると思います。私はangular2で同様のことをしなくてはなりませんか？

新しい@angular/routerを使用していますが、廃止予定のものではありません。

Answer 1

HTMLは動的に追加されるため、Angularは何もしません（サニタイズを除く）。解決

• 一切バインディング（[...]、(...)、xxx="{{...}}
• なしディレクティブまたはコンポーネントは、（_ng_content_xxx属性が追加されていない）

あなたが表示するように*ngIfを使用することができます

何のCSSビューのカプセル化エミュレーションをインスタンス化していません1つの要素を隠すか、
のように、ViewContainerRef.createComponentを使用してコンポーネントを動的に追加することができます。 ndで示されたAngular 2 dynamic tabs with user-click chosen components