Question

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

Answer 1

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

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

TakeLast

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

Answer 2

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

Angular 2输入ID未绑定到元素

2 个答案: