Angular 2输入ID未绑定到元素

时间:2017-09-22 20:01:36

标签: javascript html angular

我有一个Angular 2组件,它将elementId作为Input输入,然后将其设置为div上的id属性。由于某些原因,div没有被设置。

@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上的元素时,它表明没有在HTML元素上设置id属性。 Hello {{elementId}}也只显示&#34; Hello&#34;。没有填写elementId。请参见下面的照片。

但是console.log语句正确地打印出id,表明输入绑定是正确的。

图片:Inspect Element shows id is missing

2 个答案:

答案 0 :(得分:0)

角度为count的等价物,您可以使用它。

你可以像在jQuery中使用的那样在angular和querySelector中使用元素引用(ElementRef)。

TakeLast

因此,使用文档时,您应该使用document.getElementById();

答案 1 :(得分:0)

在角度生命周期中AfterViewInit是发生所有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, ...);
  }
}