angular-ng-template&ngTemplateOutlet的用法

万恶的申先生 發表於 2021-11-2 23:32:00

angular--ng-template&ngTemplateOutlet的用法

<h2> 1.ng-template指令介绍--<ng-template></ng-template></h2>
 ng-template表示一个模板，标签内是模板的内容，模板的内容可以与其它模板一起组成组件模板。
在Angular中，我们用过的许多结构指令都使用了ng-template，如ngIf、ngFor和ngSwitch。
ngTemplate中的内容可以自定义，并且一开始不会被渲染，除非满足一定的条件。我们必须使用结构指令去渲染它。
<div class="cnblogs_code">
<div>
<div><ng-template></div>
<div>    <button class="tab-button" (click)="login()">{{loginText}}</button></div>
<div>    <button class="tab-button" (click)="signUp()">{{signUpText}}</button></div>
<div></ng-template></div>
</div>
</div>
上面代码在页面中并没有被渲染。
<h2>2.ng-template使用</h2>
<h3>2.1ng-template与ngIf</h3>
我们见的最多的可能是与ngIf一块使用，当if条件不成立时，将显示else中的内容。下面代码中else语句被指向了一个名为loading的模板，通过模板引用#loading的方式。
<div class="cnblogs_code">
<pre>1 <div class="lessons-list" *ngIf="lessons else loading">
2 ...
3 </div>
4
5 <ng-template #loading>
6 <div>Loading...</div>
7 </ng-template></pre>
</div>
其实，ngIf指令也是ng-template的包装。
<div class="cnblogs_code">
<pre>1 <ng-template ="lessons" ="loading">
2 <div class="lessons-list">
3 ...
4 </div>
5 </ng-template>
6
7 <ng-template #loading>
8 <div>Loading...</div>
9 </ng-template></pre>
</div>
和为模板输入变量。
<h3>2.2同一元素使用多个结构指令</h3>
<div class="cnblogs_code">
<pre>1 <div class="lesson" *ngIf="lessons"
2 *ngFor="let lesson of lessons">
3 <div class="lesson-detail">
4 {{lesson | json}}
5 </div>
6 </div></pre>
</div>
这样会报错：
<div class="cnblogs_code">
<pre>Uncaught Error: Template parse errors:
Can't have multiple template bindings on one element. Use only one attribute
named 'template' or prefixed with *</pre>
</div>
这意味着不能在同一个元素使用两个或多个结构指令。
<div class="cnblogs_code">
<pre>1 <div *ngIf="lessons">
2 <div class="lesson" *ngFor="let lesson of lessons">
3 <div class="lesson-detail">
4 {{lesson | json}}
5 </div>
6 </div>
7 </div></pre>
</div>
可以在ngFor指令的外面包一层ngIf指令，这样就解决了上面的问题；但这样会额外创一个一个元素。因此，我们可以使用ng-container指令。
<div class="cnblogs_code">
<pre>1 <ng-container *ngIf="lessons">
2 <div class="lesson" *ngFor="let lesson of lessons">
3 <div class="lesson-detail">
4 {{lesson | json}}
5 </div>
6 </div>
7 </ng-container></pre>
</div>
ng-container的一种用途是，给我们提供一个附加指令的元素而不会创建一个额外的元素。另一种用途是，配合ngTemplateOutlet使用。
<h2>3.ngTemplateOutlet使用介绍</h2>
ngTemplateOutlet也是一个指令，它使用模板引用和上下文对象作为参数动态实例化模板。作为一个结构指令，我们可以使用它在DOM的各个部分插入模板(由ng-template创建)。
 1 <ng-container *ngTemplateOutlet="loading">This text is not displayed</ng-container> 
ngTemplateOutlet包含的任何内部内容都不会被渲染；我们可以根据需要向页面添加任意数量的ngTemplateOutlet标签，并实例化许多不同的模板。
 1 <div *ngTemplateOutlet="loading"></div>  
上面代码中的div并不会被渲染，因为angular将上述内容替换成ng-template语法,
 1 <ng-template ="template1"><div></div></ng-template> 
<h3>3.1传递数据给ngTemplateOutlet</h3>
我们可以通过ngTemplateOutletContext属性传递数据
<div class="cnblogs_code">
<pre>1 <ng-template let-value="value" #messageTemplate>
2 Value Received from the Parent is{{value}}
3 </ng-template></pre>
</div>
<div class="cnblogs_code">
<pre>1 <ng-container ="messageTemplate"
2 ="{value:'1000'}">
3 </ng-container> </pre>
</div>
当然，也可以使用简写属性--context:
 1 <ng-container *ngTemplateOutlet="messageTemplate; context:{value:100}"></ng-container>  传递多个数据：
<div class="cnblogs_code">
<pre>1 <ng-template let-name="nameVar" let-message="messageVar" #template>
2 Dear {{name}} , {{message}} 
3 </ng-template>
4
5
6 <ng-container ="template"
7 ="{nameVar:'Guest',messageVar:'Welcome to our site'}">
8 </ng-container> </pre>
</div>
传递对象：
<div class="cnblogs_code">
<pre>1
2 <ng-template let-person="person"#template>
3 Dear {{person.name}} , {{person.message}} 
4 </ng-template>
5
6
7 <ng-container ="template"
8 ="{ person:{name:'Guest',message:'Welcome to our site'} }">
9 </ng-container> </pre>
</div>
使用$implicit:
可以在上下文对象中使用$implicit将其值设置为所有局部变量的默认值。
<div class="cnblogs_code">
<pre>1 <ng-template let-name let-message="message" #template3>
2 Dear {{name}} , {{message}} 
3 </ng-template>
4
5 <ng-container ="templates"
6 ="{$implicit:'Guest',message:'Welcome to our site'}">
7 </ng-container> </pre>
</div>
上面代码中，我们没有给 let-name 赋值，因此它从$implicit中获取值。
<h3>3.2模板上下文</h3>
每个模板可以定义自己的输入变量；实际上，每个模板都关联了一个上下文对象，其中包含所有特定于模板的输入变量。 
<div class="cnblogs_code">
<pre> 1 @Component({
 2 selector: 'app-root',
 3 template: `
 4 <ng-template #estimateTemplate let-lessonsCounter="estimate">
 5 <div> Approximately {{lessonsCounter}} lessons ...</div>
 6 </ng-template>
 7 <ng-container
 8 *ngTemplateOutlet="estimateTemplate;context:ctx">
 9 </ng-container>
10 `})
11 export class AppComponent {
12
13 totalEstimate = 10;
14 ctx = {estimate: this.totalEstimate};
15
16 }</pre>
</div>
说明：lessonsCounter为输入变量，通过ng-template属性使用前缀 let- 定义的
lessonsCounter对ng-template模板里面的内容是可见的，对模板外是不可见的。
lessonsCounter的值是由 estimate 决定的，故context 对象必须有一个estimate 的属性。
<h3>3.3 模板引用</h3>
我们可以使用ViewChild装饰器将模板直接注入到组件中：
<div class="cnblogs_code">
<pre> 1 @Component({
 2 selector: 'app-root',
 3 template: `
 4 <ng-template #defaultTabButtons>
 5 <button class="tab-button" (click)="login()">
 6 {{loginText}}
 7 </button>
 8 <button class="tab-button" (click)="signUp()">
 9 {{signUpText}}
10 </button>
11 </ng-template>
12 `})
13 export class AppComponent implements OnInit {
14
15 @ViewChild('defaultTabButtons')
16 private defaultTabButtonsTpl: TemplateRef<any>;
17
18 ngOnInit() {
19 console.log(this.defaultTabButtonsTpl); //undefined; ngAfterViewInit()才会打印
20 }
21
22 }</pre>
</div>
模板可以被注入，就像DOM元素和组件一样，通过将模板引用传给ViewChild装饰器。
我们还可以将模板作为一个输入变量：
<div class="cnblogs_code">
<pre> 1 @Component({
 2 selector: 'app-root',
 3 template: `
 4 <ng-template #customTabButtons>
 5 <div class="custom-class">
 6 <button class="tab-button" (click)="login()">
 7 {{loginText}}
 8 </button>
 9 <button class="tab-button" (click)="signUp()">
10 {{signUpText}}
11 </button>
12 </div>
13 </ng-template>
14 <tab-container ="customTabButtons"></tab-container>
15 `})
16 export class AppComponent implements OnInit {
17
18 }</pre>
</div>
<div class="cnblogs_code">
<pre> 1 @Component({
 2 selector: 'tab-container',
 3 template: `
 4
 5 <ng-template #defaultTabButtons>
 6
 7 <div class="default-tab-buttons">
 8 ...
 9 </div>
10
11 </ng-template>
12 <ng-container
13 *ngTemplateOutlet="headerTemplate ? headerTemplate: defaultTabButtons">
14
15 </ng-container>
16 ... rest of tab container component ...
17 `})
18 export class TabContainerComponent {
19 @Input()
20 headerTemplate: TemplateRef<any>;
21 }</pre>
</div>
当我们传入自定义模板时(#customTabButtons)，就显示这个自定义模板；否则，显示默认的模板。
<h3>3.4 ngTemplateOutlet、ng-template 与内容投影</h3>
父组件使用内容投影传递一个模板给子组件：
<div class="cnblogs_code">
<pre> 1 import { Component, TemplateRef, Input, OnInit, ViewChild, AfterViewInit } from '@angular/core';
 2
 3 @Component({
 4 selector: 'parent1',
 5 template: `
 6
 7 <h1>Parent Component </h1>
 8
 9 <child1>
10 This Template is Projected to the Child
11 </child1>
12 `
13 })
14 export class Parent1Component {
15 }</pre>
</div>
子组件：
<div class="cnblogs_code">
<pre> 1 import { Component, TemplateRef, Input, OnInit, ViewChild, AfterViewInit } from '@angular/core';
 2
 3 @Component({
 4 selector: 'child1',
 5 template: `
 6
 7 <h1>Child Component </h1>
 8
 9 <ng-template #parentTemplate>
10 <ng-content></ng-content>
11 </ng-template>
12
13 <ng-template ="parentTemplate"></ng-template>
14
15 `
16 })
17 export class Child1Component {
18 }
19</pre>
</div>
<h2>4.总结</h2>
ng-template、ng-container和ngTemplateOutlet指令结合使用，可以创建高度动态和可定制的组件。
 
<div id="gtx-trans" style="position: absolute; left: -18px; top: 4641.3px"> </div> 
来源：https://www.cnblogs.com/sparkler/p/15490689.html

頁: [1]

琼殿技术论坛's Archiver

angular--ng-template&ngTemplateOutlet的用法