Angular 2输入ID未绑定到元素

Question

我有一个 Angular 2 组件，它获取 elementId 作为输入，然后将其设置为 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 上的元素时，它显示没有在 HTML 元素上设置 id 属性。 Hello {{elementId}} 也只显示“Hello”。没有填写elementId。见下图。

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

图片：Inspect Element shows id is missing

Answer 1

document.getElementById(); 有一个等效的角度，你可以使用它。

您可以像在 jQuery 中一样使用 angular 和 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')

所以与其使用文档，不如使用ElementRef

Answer 2

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