如何知道元素何时在 Angular 2 上添加到 DOM？

Question

我需要操作一个被 *ngIf 指令隐藏的 DOM 元素：

<div *ngIf="myBoolean">
    <canvas id="myElement"></canvas>
</div>

单击按钮后，我运行以下方法：

showMyElement(){
    this.myBoolean = true; //This shows the div containing myElement
    console.log(document.getElementById('myElement')); //This gives me null
}

但是，如果我在看到另一个按钮后单击另一个按钮得到myElement，我不会得到null。我想当我第一次得到它时，它还没有被添加到 DOM 中。我如何知道myElement 何时被添加到 DOM？有没有像 (ngModelChange) 这样的东西，但是当添加到 DOM 时？谢谢！

Answer 1

您可以手动运行更改检测周期以确保您的视图已更新

constructor(private cdRef: ChangeDetectorRef) {}

showMyElement(){
    this.myBoolean = true; 
    this.cdRef.detectChanges(); // redraw view
    console.log(document.getElementById('myElement')); //This gives me null
}

另见

• Angular 4 - What is the right way to "wait for operation"?