如何在Angular 2+中对动态创建的html元素使用ViewChild？

import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';

@Component({
  selector: 'app-dynamic-elements',
  template: `
    <div #dynamicDivs></div>
  `
})
export class DynamicElementsComponent {
  @ViewChildren('dynamicDivs', { read: ElementRef }) dynamicDivs: QueryList<ElementRef>;

  ngAfterViewInit() {
    // 动态添加元素
    const newDiv = document.createElement('div');
    newDiv.id = 'newDynamicDiv';
    this.dynamicDivs.first.nativeElement.appendChild(newDiv);

    // 监听元素变化
    this.dynamicDivs.changes.subscribe(() => {
      console.log('Dynamic elements changed');
    });
  }
}

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

@Component({
  selector: 'app-dynamic-elements',
  template: `<div #container></div>`
})
export class DynamicElementsComponent {
  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngAfterViewInit() {
    const newDiv = this.renderer.createElement('div');
    this.renderer.setAttribute(newDiv, 'id', 'newDynamicDiv');
    this.renderer.appendChild(this.el.nativeElement.querySelector('#container'), newDiv);
  }
}

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { DynamicComponent } from './dynamic.component'; // 假设你有一个动态组件

@Component({
  selector: 'app-dynamic-components',
  template: `<ng-container #container></ng-container>`
})
export class DynamicComponentsComponent {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  ngAfterViewInit() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
    const componentRef = this.container.createComponent(componentFactory);
  }
}