使用ElementRef与async pipe时出现nativeElement未定义报错的解决方法

报错Cannot read properties of undefined (reading 'nativeElement')的核心原因是DOM元素未被创建时就尝试访问它：

• HTML中的*ngIf="(article$ | async) as article"只有当article$发出有效值后，才会渲染内部的#articleBody元素。
• 你在ngAfterViewInit中给article$赋值并通过tap操作DOM，但此时article$刚订阅，还没发出值，#articleBody还没渲染到DOM里，@ViewChild获取不到元素，this.articleBody为undefined。

方法1：用Angular模板绑定替代手动DOM操作（推荐） #

这是最符合Angular设计理念的方式，完全避免手动操作DOM的风险：
修改HTML代码：

<div *ngIf="(article$ | async) as article">
    <div [innerHTML]="article.body"></div>
</div>

TypeScript代码简化为：

// 可以删除@ViewChild的定义，因为不再需要
ngAfterViewInit() {
    this.article$ = this.articleService.article$;
}

方法2：确保元素存在后再操作DOM（适合必须手动操作的场景） #

如果因为特殊需求必须手动修改innerHTML，可以通过以下方式确保元素已渲染：

方式A：利用变更检测强制更新 #

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

// ...

@ViewChild("articleBody") articleBody: ElementRef;

constructor(private cdr: ChangeDetectorRef) {}

ngAfterViewInit() {
    this.article$ = this.articleService.article$.pipe(
      tap(x => {
        // 触发变更检测，让*ngIf渲染出articleBody元素
        this.cdr.detectChanges();
        // 先判断元素是否存在，再执行赋值
        if (this.articleBody) {
          this.articleBody.nativeElement.innerHTML = x.body;
        }
      })
    );
}

方式B：延迟执行（等待DOM渲染完成） #

@ViewChild("articleBody") articleBody: ElementRef;

ngAfterViewInit() {
    this.article$ = this.articleService.article$.pipe(
      tap(x => {
        // 用setTimeout等待当前宏任务结束，DOM完成渲染
        setTimeout(() => {
          if (this.articleBody) {
            this.articleBody.nativeElement.innerHTML = x.body;
          }
        });
      })
    );
}

方式C：通过模板生命周期钩子传递元素 #

直接在元素初始化后调用组件方法，确保元素已存在：
HTML代码：

<div *ngIf="(article$ | async) as article">
    <div #articleBody (ngAfterViewInit)="setArticleContent(article.body, articleBody)"></div>
</div>

TypeScript代码：

setArticleContent(body: string, element: ElementRef) {
  element.nativeElement.innerHTML = body;
}

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