Angular中DOM元素访问的生命周期陷阱与解决方案

<div class="input-wrapper" *ngFor="let i of rolesData">
    <input type="checkbox" name="{{i.role}}" id="{{i.role}}" class="selectedRole">
    <label for="{{i.role}}">{{i.role}}</label>
</div>

ngOnInit() {
  console.log("element", document.getElementById('Software Developer')); // 此时会打印 null
}

import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <div class="input-wrapper" *ngFor="let i of rolesData">
        <input type="checkbox" name="{{i.role}}" id="{{i.role}}" class="selectedRole">
        <label for="{{i.role}}">{{i.role}}</label>
    </div>
  `
})
export class MyComponent implements AfterViewInit {
  rolesData = [{ role: 'Software Developer' }, { role: 'Project Manager' }];

  ngAfterViewInit() {
    console.log('element', document.getElementById('Software Developer'));
    // 此时可以成功获取到元素并进行操作
    const checkbox = document.getElementById('Software Developer') as HTMLInputElement;
    if (checkbox) {
      checkbox.checked = true;
    }
  }
}

import { Component, OnInit, AfterViewChecked, OnDestroy } from '@angular/core';
import { Subject, forkJoin } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-dynamic-component',
  template: `
    <div class="input-wrapper" *ngFor="let i of rolesData">
        <input type="checkbox" name="{{i.role}}" id="{{i.role}}" class="selectedRole">
        <label for="{{i.role}}">{{i.role}}</label>
    </div>
  `
})
export class DynamicComponent implements OnInit, AfterViewChecked, OnDestroy {
  rolesData: any[] = [];
  rolesData$: Subject<any[]> = new Subject<any[]>(); // 模拟异步数据源

  private isDataFetchedSubject: Subject<boolean> = new Subject<boolean>();
  isDataFetched$ = this.isDataFetchedSubject.asObservable();

  private isViewRenderedSubject: Subject<boolean> = new Subject<boolean>();
  isViewRendered$ = this.isViewRenderedSubject.asObservable();

  private destroyed$: Subject<void> = new Subject<void>(); // 用于管理订阅的生命周期

  ngOnInit() {
    // 模拟异步数据获取
    // 实际应用中，rolesData$会是一个HTTP请求或其他Observable
    setTimeout(() => {
      const fetchedData = [{ role: 'Software Developer' }, { role: 'Project Manager' }];
      this.rolesData = fetchedData;
      this.rolesData$.next(fetchedData); // 触发数据流
      this.isDataFetchedSubject.next(true);
      this.isDataFetchedSubject.complete(); // 标记数据已获取
    }, 1000); // 延迟1秒模拟异步

    // 监听数据获取和视图渲染完成的信号
    forkJoin([this.isDataFetched$, this.isViewRendered$])
      .pipe(takeUntil(this.destroyed$))
      .subscribe(([dataFlag, viewFlag]) => {
        console.log('Observable is completed - Data:', dataFlag, 'View:', viewFlag);

        if (dataFlag && viewFlag) {
          // 数据和视图都已准备就绪，可以安全地访问DOM元素
          // 使用setTimeout延迟执行，以确保DOM更新完全完成
          let checkElementExist = setTimeout(() => {
            const element = document.getElementById('Software Developer') as HTMLInputElement;
            if (element) {
              console.log('(2) element', element);
              element.checked = true;
              clearTimeout(checkElementExist); // 找到元素后清除定时器
            } else {
              // 如果元素仍未找到，可以考虑再次延迟或重试逻辑
              // 但在forkJoin确保了数据和视图都准备好的情况下，通常第一次就能找到
              console.warn('Element "Software Developer" not found after view and data readiness.');
            }
          }, 0); // 0ms延迟，将操作放入事件队列末尾，确保当前DOM更新周期完成
        }
      });
  }

  ngAfterViewChecked() {
    // 每次视图检查后，发送视图已渲染的信号
    // 注意：isViewRenderedSubject只在第一次视图检查后complete
    if (!this.isViewRenderedSubject.closed) {
      this.isViewRenderedSubject.next(true);
      this.isViewRenderedSubject.complete();
    }
  }

  ngOnDestroy() {
    this.destroyed$.next();
    this.destroyed$.complete();
  }
}