如何访问Angular中<ng-template>内的DOM元素？

当你在subscribe回调里把loader设为false后，Angular并不会立即执行变更检测、更新DOM。这时候直接调用document.getElementById('gif-html')，模板还没渲染完成，自然拿不到元素，返回null。

解决方案 #

方法1：用setTimeout延后获取操作 #

把获取元素的代码放到setTimeout里，让它等Angular完成变更检测和DOM更新后再执行：

this.loader = false;
if (response.status === 'success') {
  setTimeout(() => {
    let gifHtml = document.getElementById('gif-html');
    console.log('gifHtml', gifHtml);
  });
}

方法2：手动触发变更检测 #

注入ChangeDetectorRef，先手动触发变更检测，确保DOM更新后再获取元素：
首先在组件构造函数注入依赖：

constructor(private cdr: ChangeDetectorRef) {}

然后在subscribe回调里修改：

this.loader = false;
// 手动触发变更检测，强制Angular更新DOM
this.cdr.detectChanges();
if (response.status === 'success') {
  let gifHtml = document.getElementById('gif-html');
  console.log('gifHtml', gifHtml);
}

方法3：用ViewChild（Angular推荐方式） #

直接用Angular的ViewChild获取元素，避免直接操作DOM：

1. 组件内定义ViewChild：

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

// ...

@ViewChild('gifHtml') gifHtml!: ElementRef<HTMLDivElement>;

2. 修改模板，给目标元素加模板引用变量：

<ng-template #show_form_content>
  <div class="gifTimer" #gifHtml></div>
</ng-template>

3. 监听loader变化，在视图更新后获取元素：

import { AfterViewChecked } from '@angular/core';

export class YourComponent implements OnInit, AfterViewChecked {
  loader = true;
  private isLoaderUpdated = false;

  @ViewChild('gifHtml') gifHtml!: ElementRef<HTMLDivElement>;

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    this.getMyData();
  }

  ngAfterViewChecked() {
    if (this.isLoaderUpdated) {
      // 此时视图已完成更新，可安全获取元素
      console.log('gifHtml', this.gifHtml.nativeElement);
      this.isLoaderUpdated = false;
    }
  }

  getMyData() {
    this.loader = true;
    this.myService
      .getData()
      .subscribe((response) => {
        this.loader = false;
        this.isLoaderUpdated = true;
        this.cdr.detectChanges();
      });
  }
}

内容的提问来源于stack exchange，提问作者techguy