ng-template 是用來定義模板的，當(dāng)使用ng-template定義好一個(gè)模板之后，可以用ng-container和templateOutlet指令來進(jìn)行使用。

<ng-template #loading> <button (click)="login()">login</button> <button (click)="sigup()">sigup</button></ng-template><ng-container *ngTemplateOutlet="loading"></ng-container>

ng-template在編寫高定制性的組件時(shí)非常有用。可以把需要定制的內(nèi)容作為模板傳到組件中。

下面看下angular 使用 ngTemplateOutlet 指令

ngTemplateOutlet 的作用

該指令用于基于已有的 TemplateRef 對象，插入對應(yīng)的內(nèi)嵌視圖。在應(yīng)用 NgTemplateOutlet 指令時(shí)，我們可以通過 [ngTemplateOutletContext] 屬性來設(shè)置 EmbeddedViewRef 的上下文對象。綁定的上下文應(yīng)該是一個(gè)對象，此外可通過 let語法來聲明綁定上下文對象屬性名。

 ngTemplateOutlet 的使用

import { Component } from '@angular/core';@Component({ selector: 'app-root', template: `  <ng-template #stpl>   Hello, Semlinker!  </ng-template>  <ng-template #atpl>   Hello, Angular!  </ng-template>  <div [ngTemplateOutlet]="atpl"></div>  <div [ngTemplateOutlet]="stpl"></div> `,})export class AppComponent { }

 ngOutletContext 的使用

import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: `  <ng-template #stpl let-message="message">   <p>{{message}}</p>  </ng-template>  <ng-template #atpl let-msg="message">   <p>{{msg}}</p>  </ng-template>  <ng-template #otpl let-msg>   <p>{{msg}}</p>  </ng-template>  <div [ngTemplateOutlet]="atpl"   [ngOutletContext]="context">  </div>  <div [ngTemplateOutlet]="stpl"   [ngOutletContext]="context">  </div>  <div [ngTemplateOutlet]="otpl"   [ngOutletContext]="context"> </div> `,}) export class AppComponent { context = { message: 'Hello ngOutletContext!',   $implicit: 'Hello, Semlinker!' };}

總結(jié)

以上所述是小編給大家介紹的Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對錯(cuò)新站長站網(wǎng)站的支持！