Question

如果我尝试选择ngIf指令中存在的DOM元素，则该元素为null。如果删除ngIf，则可以选择它。

ngAfterViewInit() {
  const outer = document.getElementById('external-events');
  console.log(outer);
}

组件模板中的代码，找不到div：

<div *ngIf="groupedPatchGroups">
  <div id="external-events">
      stuff here
  </div>
  <br />
</div>

带走* ngIf和external报告div的内容。

ngAfterViewInit是否在数据返回之前运行以确定ngIf会发生什么？我希望ngIf首先运行，而ngAfterViewInit将最后运行。

注意：groupedPatchGroups值是在ngOnInit中设置的。

Answer 1

访问新创建的元素的一种方法是在forceUpdate上设置template reference variable：

div

并订阅<div *ngIf="groupedPatchGroups"> <div #externalEvents> stuff here </div> <br /> </div>中的QueryList.changes事件。订阅之前，您还可以检查DOM中是否已经存在该元素。

ngAfterViewInit

有关演示，请参见this stackblitz。

Answer 2

仅当ngIf中的表达式为true时才使用ngIf创建DOM元素，如果ngIf中的表达式为false则不会创建DOM元素。在您的情况下，如果groupedPatchGroups = true则只有在ngIf div内的div

Answer 3

尝试一下，

constructor(private cdref: ChangeDetectorRef)

ngAfterViewInit() {
  this.cdref.detectChanges();
  const outer = document.getElementById('external-events');
  console.log(outer);
}

使用ngIf时找不到div

3 个答案: