angular - 如何等到 ngIf 在 DOM 中插入内容？

Question

关闭。这个问题是 opinion-based .它目前不接受答案。

---

想要改进这个问题吗？ 更新问题，以便 editing this post 提供事实和引用来回答它.

关闭3年前。

Improve this question

Stackblitz Example

    import { Component, Input,ViewChild,ElementRef } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>

  <button (click)='setFoo()'>Trigger NG IF</button>

  <div *ngIf="myFooBoolean" #fooDiv>
  myFooBoolean was set to true
  </div>
`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
  @Input() name: string;
  myFooBoolean: boolean;
  @ViewChild('fooDiv', {static: false}) fooDiv: ElementRef;

  setFoo() {
    this.myFooBoolean = true;
    const el: HTMLDivElement = this.fooDiv.nativeElement;
    console.log(el);
  }
}

如果您单击按钮，您将在控制台中看到一个错误，因为您正在尝试访问一个通过 Ngif 插入到 DOM 中的元素我可以通过使用 来解决这个错误setTimeout()

但是还有其他更好的方法可以解决吗？

Answer 1

我能想到两种选择:

1:实现 ngAfterContentChecked()等到在 dom 中的每次更改检测(当您的元素显示/隐藏，以及很多其他事情时)后，这被 angular 调用。根据您的用例，这可能不是很有用。

2: 将 ChangeDetectorRef 注入(inject)到您的组件中，并在设置您的 myFooBoolean 后运行 ChangeDetectorRef.detectChanges()，之后的行应该能够很好地访问您的 viewchild。