我有一个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,表明输入绑定是正确的。
答案 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, ...);
}
}