如何在 Angular 中将 ng-template 插入到动态创建的外部元素？

javascript

2024-03-07 00:31:05

## 动态插入 ng-template 到外部元素

问题

在 Angular 应用中，如何将 ng-template 插入到动态添加的外部元素中？

解决方法

利用 ViewChild 和 AfterViewInit 生命周期钩子，我们可以将 ng-template 插入外部元素。

步骤

定义 ng-template

<ng-template #myTemplate>
  <!-- Template 内容 -->
</ng-template>

获取 ViewChild

@ViewChild('myTemplate') myTemplate: TemplateRef<any>;

监听外部元素事件

在 AfterViewInit 生命周期钩子中，监听外部元素的事件：

ngAfterViewInit() {
  document.getElementById('external-element').addEventListener('click', () => {
    // ...
  });
}

插入 ng-template

在事件处理程序中，延迟执行代码，确保外部元素已加载：

setTimeout(() => {
  const parentElement = document.getElementById('external-element-parent');
  parentElement.appendChild(this.myTemplate.elementRef.nativeElement);
}, 500);

注意

使用 setTimeout 延迟执行是为了确保外部元素已加载。
appendChild 方法将移动 ng-template，而不是创建副本。

示例

export class MyComponent implements AfterViewInit {
  @ViewChild('myTemplate') myTemplate: TemplateRef<any>;

  ngAfterViewInit() {
    document.getElementById('external-element').addEventListener('click', () => {
      setTimeout(() => {
        const parentElement = document.getElementById('external-element-parent');
        parentElement.appendChild(this.myTemplate.elementRef.nativeElement);
      }, 500);
    });
  }
}