Angular中如何利用動態模板來構建更靈活的組件

在Angular中，可以利用ngTemplateOutlet指令來實現動態模板的功能，從而構建更靈活的組件。ngTemplateOutlet指令可以在組件模板中動態地加載一個指定的模板，并將其內容插入到相應的位置。

下面是一個簡單的示例，演示了如何在一個組件中使用ngTemplateOutlet來加載不同的模板：

首先，在組件的模板中定義兩個不同的模板：

<ng-template #template1>
  <h1>This is template 1</h1>
</ng-template>

<ng-template #template2>
  <h1>This is template 2</h1>
</ng-template>

然后在組件類中定義一個變量來控制當前要展示的模板：

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

@Component({
  selector: 'app-dynamic-template',
  templateUrl: './dynamic-template.component.html',
  styleUrls: ['./dynamic-template.component.css']
})
export class DynamicTemplateComponent {
  @ViewChild('template1') template1: TemplateRef<any>;
  @ViewChild('template2') template2: TemplateRef<any>;

  currentTemplate: TemplateRef<any>;

  showTemplate1() {
    this.currentTemplate = this.template1;
  }

  showTemplate2() {
    this.currentTemplate = this.template2;
  }
}

最后，在組件的模板中使用ngTemplateOutlet來動態地加載模板：

<div>
  <button (click)="showTemplate1()">Show Template 1</button>
  <button (click)="showTemplate2()">Show Template 2</button>
</div>

<div [ngTemplateOutlet]="currentTemplate"></div>

通過這種方式，我們可以在組件中根據需要動態地加載不同的模板，從而實現更靈活的組件構建。