角度2入力IDが要素にバインドされていません

Question

私は、inputとしてelementIdを取得するAngular 2コンポーネントを持っており、それをdivのid属性として設定します。何らかの理由でdivのIDが設定されません。

@Component({ 
    selector: 'my-chart', 
    template: ` 
     <div> 
      Hello {{elementId}} 
      <div [id]="elementId"></div> 
     </div> 
    ` 
}) 

export class MyChartComponent implements OnInit, OnChanges { 
    @Input() elementId: string; 

    ngOnInit() { 
     this.createChart(); 
    } 

    createChart() { 
     console.log("ID: ", this.elementId); 
     ... 
    } 
} 

これは、それが親コンポーネントで次のようになります。

<div *ngFor="let chart of charts"> 
    <my-chart [elementId]="chart.id"></my-chart> 
</div> 

-

私はdiv要素に要素を検査するとき、それはid属性がONに設定されなかったことを示していますHTML要素。また、Hello {{elementId}}は "Hello"のみを表示します。要素の記入はありません。下の写真を参照してください。

しかしconsole.log文は正しく結合入力が正しいことを示す、IDを出力します。

画像：Inspect Element shows id is missing

Answer 1

を使用する必要があります結合が起こった場所の場所は、すべてのHTMLとJSです。

あなたはAfterViewInit方法で、外部のDOM monuplationを記述する必要があります。

export class MyChartComponent implements OnInit, OnChanges, AfterViewInit { 
    @Input() elementId: string; 

    ngOnInit() { 

    } 

    ngAfterViewInit(): void { 
     console.log("ID: ", this.elementId); 
     Plotly.newPlot(this.elementId, ...); 
    } 
} 

Answer 2

がdocument.getElementById();の等価は角にあり、あなたがそれを使用することができます。

あなたはjQueryのに使用される角度とquerySelector方法で要素参照（ElementRef）を使用することができます。そうではなく、文書を使用して

constructor(private elementRef: ElementRef) { 
    } 

    // this is inside any of the method 
    // this is to select multiple 
    this.elementRef.nativeElement.querySelectorAll('.mandate'); 

    // this is to select single 
    this.elementRef.nativeElement.querySelector('.mandate') 

、あなたは角度ライフサイクルAfterViewInitでElementRef