Angular中的ng-template及angular 使用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在編寫高定制性的組件時非常有用??梢园研枰ㄖ频膬?nèi)容作為模板傳到組件中。
下面看下angular 使用 ngTemplateOutlet 指令
ngTemplateOutlet 的作用
該指令用于基于已有的 TemplateRef 對象,插入對應的內(nèi)嵌視圖。在應用 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!' };
}
總結(jié)
以上所述是小編給大家介紹的Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
詳解AngularJs中$resource和restfu服務端數(shù)據(jù)交互
之前小編和大家分享過使用$http同服務器進行通信,但是功能上比較簡單,angularjs還提供了另外一個可選的服務$resource,使用它可以非常方便的同支持restful的服務單進行數(shù)據(jù)交互。下面來一起看看吧。2016-09-09
ANGULARJS中用NG-BIND指令實現(xiàn)單向綁定的例子
這篇文章主要介紹了ANGULARJS中用NG-BIND指令實現(xiàn)單向綁定的例子,本文簡單介紹AngularJS框架后,用一個實例演示{{}}插值法和ng-bind指令的使用,需要的朋友可以參考下2014-12-12
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框架中的作用域與數(shù)據(jù)綁定
這篇文章主要介紹了JavaScript的AngularJS框架中的作用域與數(shù)據(jù)綁定,包括作用域的繼承以及數(shù)據(jù)的單向和雙向綁定等重要知識點,需要的朋友可以參考下2016-03-03
AngularJS實現(xiàn)的JSONP跨域訪問數(shù)據(jù)傳輸功能詳解
這篇文章主要介紹了AngularJS實現(xiàn)的JSONP跨域訪問數(shù)據(jù)傳輸功能,較為詳細的分析了JSONP的概念、功能并結(jié)合實例形式給出了AngularJS使用JSONP進行跨域訪問數(shù)據(jù)傳輸?shù)南嚓P技巧,需要的朋友可以參考下2017-07-07

