Angular10教程–2.6 NgTemplateOutlet指令

Angular10教程--2.6 NgTemplateOutlet指令
前面我们有写过一个dialog组件,其中有一个功能点我们是没有实现的,那就是不能传入自定义组件内容。这一节,我们了解下结构

需求分析:

  • 创建一个子组件,并且有默认内容
  • 父组件能够传入自定义内容
  • 父组件能够访问子组件内部变量

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></h2>
  <div class="content">
    <!-- 使用ngTemplateOutlet绑定模板 -->
    <ng-container [ngTemplateOutlet]="defaultTpl"></ng-container>
  </div>
</div>
<ng-template #defaultTpl>
  <p>组件默认内容</p>
</ng-template>

页面表现:

Angular10教程--2.6 NgTemplateOutlet指令

想要组件能够引用外部传入的内容,首先应该定义一个输入属性来接收:

// tpl-outlet.component.ts
import { Component, Input, OnInit, TemplateRef } from '@/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>

页面表现:

Angular10教程--2.6 NgTemplateOutlet指令

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>

页面表现:

Angular10教程--2.6 NgTemplateOutlet指令

因为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教程,版权归原作者所有,本博客仅以学习目的的传播渠道,不作版权和内容观点阐述,转载时根据场景需要有所改动。