ng-template 动态修改template

`ng-template` 是 Angular 中的一个指令，它允许我们声明一个模板，并在需要时使用它来渲染视图。通常情况下，我们在组件或指令中使用 `ng-template` 来定义模板，然后在模板中使用 `ngIf`、`ngFor` 等指令来渲染数据。

如果你想在运行时动态修改 `ng-template` 中的模板内容，可以考虑使用 `TemplateRef` 和 `ViewContainerRef`。`TemplateRef` 代表一个模板，它可以作为参数传递给组件或指令的方法中，而 `ViewContainerRef` 则表示一个视图容器，它可以插入、移动或删除视图。

下面是一个示例代码，演示如何动态修改 `ng-template` 中的模板内容：

import { Component, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <ng-container #container></ng-container>
    <ng-template #template let-name>{{ name }}</ng-template>
  `
})
export class AppComponent {
  @ViewChild('template') template: TemplateRef<any>;
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  ngOnInit() {
    const embeddedView = this.template.createEmbeddedView({ name: 'Tom' });
    this.container.insert(embeddedView);
    
    // 修改模板内容
    embeddedView.context.name = 'Jerry';
    embeddedView.detectChanges();
  }
}

在上面的代码中，我们首先使用 `@ViewChild` 装饰器获取 `ng-template` 和视图容器的引用。然后，在 `ngOnInit` 生命周期钩子中，我们创建了一个嵌入式视图，并将其插入到视图容器中。最后，我们修改了模板中的内容，并调用了 `detectChanges` 方法来触发变更检测。

需要注意的是，在调用 `createEmbeddedView` 方法时，我们可以传递一个上下文对象，它可以在模板中使用。在上面的示例中，我们将 `{ name: 'Tom' }` 作为上下文对象传递给了模板。在模板中，我们使用 `let-name` 语法来声明一个名为 `name` 的变量，并在模板中使用它来渲染数据。