Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
更新時間：2018年08月08日 16:19:26 作者：qq_35501580
ng-template 是用來定義模板的，當使用ng-template定義好一個模板之后，可以用ng-container和templateOutlet指令來進行使用。這篇文章給大家介紹了Angular中的ng-templateangular及使用 ngTemplateOutlet 指令的方法，需要的朋友參考下吧
ng-template 是用來定義模板的，當使用ng-template定義好一個模板之后，可以用ng-container和templateOutlet指令來進行使用。
<ng-template #loading> <button (click)="login()">login</button> <button (click)="sigup()">sigup</button> </ng-template> <ng-container *ngTemplateOutlet="loading"> </ng-container>
ng-template在編寫高定制性的組件時非常有用?？梢园研枰ㄖ频膬热葑鳛槟０鍌鞯浇M件中。
下面看下angular 使用 ngTemplateOutlet 指令
ngTemplateOutlet 的作用
該指令用于基于已有的 TemplateRef 對象，插入對應的內嵌視圖。在應用 NgTemplateOutlet 指令時，我們可以通過 [ngTemplateOutletContext] 屬性來設置 EmbeddedViewRef 的上下文對象。綁定的上下文應該是一個對象，此外可通過 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!' };
}
總結
以上所述是小編給大家介紹的Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要介紹了angularjs實現的購物金額計算工具,涉及AngularJS事件監(jiān)聽、數值計算相關操作技巧,需要的朋友可以參考下2018-05-05
詳解AngularJs中$resource和restfu服務端數據交互
之前小編和大家分享過使用$http同服務器進行通信，但是功能上比較簡單，angularjs還提供了另外一個可選的服務$resource,使用它可以非常方便的同支持restful的服務單進行數據交互。下面來一起看看吧。2016-09-09
這篇文章主要介紹了ANGULARJS中用NG-BIND指令實現單向綁定的例子,本文簡單介紹AngularJS框架后,用一個實例演示{{}}插值法和ng-bind指令的使用,需要的朋友可以參考下2014-12-12
今天小編就為大家分享一篇angularJS1 url中攜帶參數的獲取方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
AngularJS解決ng-if中的ng-model值無效的問題
本篇文章主要介紹了AngularJS解決ng-if中的ng-model值無效的問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
Angular 4環(huán)境準備與Angular cli創(chuàng)建項目詳解
Angular4.0來了，更小，更快，改動少，所以下面這篇文章主要給大家介紹了關于Angular 4環(huán)境準備與學會使用Angular cli創(chuàng)建項目的相關資料，文中給出了詳細的示例代碼供大家參考學習，需要的朋友們下面來一起看看吧。2017-05-05
詳解JavaScript的AngularJS框架中的作用域與數據綁定
這篇文章主要介紹了JavaScript的AngularJS框架中的作用域與數據綁定,包括作用域的繼承以及數據的單向和雙向綁定等重要知識點,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了詳解Angular模板引用變量及其作用域，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了AngularJS實現的JSONP跨域訪問數據傳輸功能,較為詳細的分析了JSONP的概念、功能并結合實例形式給出了AngularJS使用JSONP進行跨域訪問數據傳輸的相關技巧,需要的朋友可以參考下2017-07-07
這篇文章主要給大家介紹了關于angular瀏覽器兼容性問題的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者使用angular具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-07-07