深入了解ng-template

一、概述

Angular是一個非常流行的JavaScript框架。在Angular中，ng-template可以用來定義可重用的模板。這些模板可以幫助我們更好地組織我們的代碼並減少重複的工作，提高代碼的可讀性和可維護性。ng-template可以用來定義組件模板以及指令模板。

示例代碼：

<ng-template>
    <h1>Hello World!</h1>
</ng-template>

二、創建組件模板

組件模板是Angular應用的核心部分之一。ng-template可以用來定義組件模板。組件模板定義了組件的結構和樣式。大多數時候，我們會將組件的HTML結構和樣式保存在一個單獨的文件中，這樣有助於提高代碼的可讀性和可維護性。

示例代碼：

<ng-template #template1>
    <p>這是組件模板</p>
</ng-template>

<app-my-component >
    <ng-container *ngTemplateOutlet="template1"></ng-container>
</app-my-component>

三、創建指令模板

指令是Angular中的另一個核心組件。ng-template可以用來定義指令模板。指令模板定義了指令的結構和樣式。它們可以在HTML元素上應用指令。

示例代碼：

@Directive({
  selector: '[appMyDirective]'
})
export class MyDirective {
  constructor(private templateRef: TemplateRef<any>, private viewContainerRef: ViewContainerRef) {}

  @Input() set appMyDirective(condition: boolean) {
    if (condition) {
      this.viewContainerRef.createEmbeddedView(this.templateRef);
    }
    else {
      this.viewContainerRef.clear();
    }
  }
}

<div appMyDirective [appMyDirective]="true">
  <ng-template #myTemplate>
    <h1>Hello World!</h1>
  </ng-template>
</div>

四、創建動態模板

ng-template不僅允許我們定義靜態的模板，還可以定義動態的模板。我們可以在運行時根據需要動態創建模板，並將它們添加到組件或指令中。這為我們提供了更大的靈活性。

示例代碼：

export class MyComponent {
  @ViewChild('myTemplate', {static: true}) myTemplate: TemplateRef<any>;

  constructor(private viewContainerRef: ViewContainerRef) {}

  ngAfterViewInit() {
    const embeddedViewRef = this.myTemplate.createEmbeddedView(null);
    this.viewContainerRef.insert(embeddedViewRef);
  }
}

<ng-template #myTemplate>
  <h1>Hello World!</h1>
</ng-template>

<app-my-component></app-my-component>

五、使用*ngIf

ng-template可以和*ngIf結合使用。*ngIf是一個內置的Angular指令，它可以根據一個條件表達式顯示或隱藏元素。ng-template可以用來定義*ngIf顯示或隱藏時的模板。

示例代碼：

<div *ngIf="condition; then thenBlock; else elseBlock"></div>

<ng-template #thenBlock>
  <h1>條件為真時顯示的內容</h1>
</ng-template>

<ng-template #elseBlock>
  <h1>條件為假時顯示的內容</h1>
</ng-template>

六、使用*ngFor

ng-template還可以和*ngFor結合使用。*ngFor是一個內置的Angular指令，它可以循環遍曆數組或對象，並呈現它們的值。ng-template可以用來定義*ngFor遍歷時的模板。

示例代碼：

<ng-container *ngFor="let item of items; index as i">
  <ng-template #myTemplate>
    <h1>{{i + 1}}. {{item.title}}</h1>
    <p>{{item.description}}</p>
  </ng-template>
  
  <div [ngTemplateOutlet]="myTemplate"></div>
</ng-container>

七、總結

ng-template是Angular中的一個非常有用的概念。它可以幫助我們更好地組織我們的代碼並減少重複的工作，提高代碼的可讀性和可維護性。我們可以使用ng-template來創建靜態和動態的組件模板和指令模板，並且還可以與*ngIf和*ngFor等Angular內置指令結合使用。