使用 ngIf 时找不到 div

Question

如果我尝试选择存在于ngIF指令中的DOM元素，则该元素为空。如果我删除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和外部报告div的内容。

ngAfterViewInit是否在数据返回之前运行以确定ngIF发生了什么？我希望ngIF首先运行，而ngAfterViewInit是最后运行的东西。

注意：groupedPatchGroups 值在 ngOnInit 中设置。

Answer 1

试试这个，

constructor(private cdref: ChangeDetectorRef)

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

Answer 2

DOM 元素仅在 ngIf 中的表达式为真时使用 ngIf 创建，如果 ngIf 中的表达式为假 DOM 元素将不会创建。在您的情况下，如果分组补丁组= true，那么只有你会得到 div 在 ngIf div 中。

Answer 3

访问新创建的元素的一种方法是在 div 上设置模板引用变量：

<div *ngIf="groupedPatchGroups">
  <div #externalEvents>
      stuff here
  </div>
  <br />
</div>

并订阅ngAfterViewInit中的QueryList.changes事件。您还可以在订阅前检查元素是否已经存在于DOM中。

@ViewChildren("externalEvents") externalEvents: QueryList<ElementRef>;

ngAfterViewInit() {
  console.log("Before changes", this.externalEvents.first); // Maybe already present
  this.externalEvents.changes.subscribe((elements) => {
    // Do something with elements or with this.externalEvents
    let element = this.externalEvents.first;
    console.log("Changes detected", element);
    ...
  }
}

请参阅此堆栈闪电战以获取演示。