技術標籤：JavaScriptangular教程angular

NgTemplateOutlet指令

前面我們有寫過一個dialog元件，其中有一個功能點我們是沒有實現的，那就是不能傳入自定義元件內容。寫過vue的兄弟些肯定了解<slot>這個標籤，這一節，我們瞭解下NgTemplateOutlet結構指令，可以實現類似<slot>的功能。(原文閱讀)

需求分析：

• 建立一個子元件，並且有預設內容

• 父元件能夠傳入自定義內容

• 父元件能夠訪問子元件內部變數

ngTemplateOutlet

ngTemplateOutlet是一個結構型指令，能夠將一個提前備好的 TemplateRef

建立tpl-outlet元件：

ng g c components/tpl-outlet -s

引用元件：

<!-- app.component.html -->
<app-tpl-outlet></app-tpl-outlet>

修改元件：

<!-- tpl-outlet.component.html -->
<div class="outlet">
  <h2>NgTemplateOutlet</h2>
  <div class="content"
 
>
    <!-- 使用ngTemplateOutlet繫結模板 -->
    <ng-container [ngTemplateOutlet]="defaultTpl"></ng-container>
  </div>
</div>
<ng-template #defaultTpl>
  <p>元件預設內容</p>
</ng-template>

頁面表現：

想要元件能夠引用外部傳入的內容，首先應該定義一個輸入屬性來接收：

// tpl-outlet.component.ts
 

import { Component, Input, OnInit, TemplateRef } from '@angular/core';
...
export class TplOutletComponent implements OnInit {
  // 定義一個叫render的輸入屬性，並且接收TemplateRef型別的值
  @Input() render: TemplateRef<any>;
  //...
}

修改模板，接收變數：

<!-- tpl-outlet.component.html -->
<div class="outlet">
  <h2>NgTemplateOutlet</h2>
  <div class="content">
    <!-- 渲染內容為render的值或者預設內容 -->
    <ng-container [ngTemplateOutlet]="render || render"></ng-container>
  </div>
</div>
<ng-template #defaultTpl>
  <p>元件預設內容</p>
</ng-template>

父元件傳入自定義內容：

<!-- app.component.html -->
<app-tpl-outlet [render]="outTpl"></app-tpl-outlet>

<ng-template #outTpl>
  <p>外部傳入模板內容</p>
</ng-template>

頁面表現：

ngTemplateOutletContext

ngTemplateOutletContext是一個物件，該物件的key可在模板中使用let語句進行繫結。可以通過設定ngTemplateOutletContext來給EmbeddedViewRef(也就是我們這兒的<ng-container>)附加一個上下文物件。

元件定義變數：

// tpl-outlet.component.ts
...
export class TplOutletComponent implements OnInit {
  // 隨便定義的一個物件
  // $implicit是一個可以被預設識別的key值
  ctx = {$implicit: 'default', value: 'context value'}
  //...
}

模板繫結ngTemplateOutletContext：

<!-- tpl-outlet.component.html -->
<div class="outlet">
  <h2>NgTemplateOutlet</h2>
  <div class="content">
    <ng-container [ngTemplateOutlet]="render || render" [ngTemplateOutletContext]="ctx"></ng-container>
  </div>
</div>
...

父元件使用：

<!-- app.component.html -->
<app-tpl-outlet [render]="outTpl"></app-tpl-outlet>

<ng-template #outTpl let-key let-val="value">
  <p>外部傳入模板內容 --- 元件內部傳過來的變數預設值:{{key}}, value:{{val}}</p>
</ng-template>

頁面表現：

因為ctx.$implicit是內部預設識別的一個值，所以在let的時候不用賦值

同時，在子元件自己的模板上也一樣能夠訪問內部變數：

<ng-template #defaultTpl let-key let-val="value">
  <p>元件預設內容 --- 預設值：{{key}},value:{{val}}</p>
</ng-template>

簡寫

既然是個結構型指令，那引用變數方式也可以這樣：

<ng-container *ngTemplateOutlet="render || defaultTpl; context: ctx"></ng-container>

並且，將指令使用在<ng-template>上也是可以的：

<ng-template *ngTemplateOutlet="render || defaultTpl; context: ctx"></ng-template>

總結

1. ngTemplateOutlet是一個結構型指令，接收一個TemplateRef型別的值；

2. 使用ngTemplateOutletContext能夠傳遞元件內部變數，簡寫直接使用context

歡迎關注我的公眾號，公眾號將第一時間更新angular教程：