Angular2如何获取动态生成的HTML元素的引用

当在Angular 2中需要获取动态生成的HTML元素引用时，有几种方法可以实现这一目的。动态生成的HTML元素通常是通过组件的逻辑或者结构来创建的，在这种情况下，我们可以使用`@ViewChild`装饰器或`ElementRef`来访问这些元素的引用。

typescript
import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'app-sample',
  template: `
    
    Add Element
  `,
})
export class SampleComponent {
  @ViewChild('dynamicElement', { static: false }) dynamicElementRef: ElementRef;
  addDynamicElement() {
    const newDiv = document.createElement('div');
    newDiv.textContent = 'Dynamic Element';
    this.dynamicElementRef.nativeElement.appendChild(newDiv);
  }
}

typescript
import { Component, ElementRef, AfterViewInit, Renderer2 } from '@angular/core';
@Component({
  selector: 'app-sample',
  template: '',
})
export class SampleComponent implements AfterViewInit {
  constructor(private elementRef: ElementRef, private renderer: Renderer2) {}
  ngAfterViewInit() {
    const newDiv = this.renderer.createElement('div');
    this.renderer.setProperty(newDiv, 'textContent', 'Dynamic Element');
    this.renderer.appendChild(this.elementRef.nativeElement, newDiv);
  }
}