詳解Angular 自定義結(jié)構(gòu)指令
更新時(shí)間：2017年06月21日 09:36:18 作者：Keriy
本篇文章主要介紹了詳解Angular 自定義結(jié)構(gòu)指令，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
1. <ng-template>元素
import { Component, TemplateRef, ViewContainerRef, ViewChild,
AfterViewInit } from '@angular/core';
@Component({
selector: 'app-code404',
template: `
<!-- 這里使用一個(gè)模板變量，在組件中使用@ViewChild裝飾器獲取模板元素-->
<ng-template #tpl>
Big Keriy !
</ng-template>
`,
})
export class Code404Component implements AfterViewInit{
// @ViewChild 裝飾器獲取模板元素
@ViewChild('tpl')
tplRef: TemplateRef<any>;
constructor(private vcRef: ViewContainerRef) {}
ngAfterViewInit() {
// 使用ViewContainerRef對(duì)象的createEmbeddedView方法創(chuàng)建內(nèi)嵌視圖。
this.vcRef.createEmbeddedView(this.tplRef);
} }
這樣其實(shí)我們?cè)谝晥D中就得到了一個(gè)什么...啊，就是一個(gè)'Big Keriy !'的字符串。
2. ngTemplateOutlet指令
a. ngTemplateOutlet
和routerOutlet是一個(gè)意思，將視圖(<ng-template>標(biāo)簽中的內(nèi)容)放到對(duì)應(yīng)的ngTemplateoutlet下面。
import { Component } from '@angular/core';
@Component({
selector: 'app-code404',
template: `
<ng-template #stpl>
Hello, Semlinker!
</ng-template>
<ng-template #atpl>
Big Keriy !
</ng-template>
<div [ngTemplateOutlet]="atpl"></div>
<div [ngTemplateOutlet]="stpl"></div>
`, })
export class Code404Component { }
最終的視圖應(yīng)該是：
Big Keriy !
Hello, Semlinker!
b. ngOutletContex
看名字就知道意思。
ngTemplateOutlet指令基于TemplateRef對(duì)象，在使用ngTemplateOutlet指令時(shí)，可以通過(guò)ngTemplateOutletContext屬性來(lái)設(shè)置來(lái)設(shè)置EmbeddedViewRef的上下文對(duì)象?？梢允褂胠et語(yǔ)法來(lái)聲明綁定上下文對(duì)象屬性名。
import { Component, TemplateRef, ViewContainerRef, ViewChild,
AfterViewInit } from '@angular/core';
@Component({
selector: 'app-code404',
template: `
<!-- 這里的messagey映射到下面context中message 再使用插值表達(dá)式的方式顯示message的值 -->
<ng-template #stpl let-message="message">
<p>{{message}}</p>
</ng-template>
<!-- 這里的messagey映射到下面context中message , let-msg是一種與語(yǔ)法糖的方式變量名是msg-->
<ng-template #atpl let-msg="message">
<p>{{msg}}</p>
</ng-template>
<!-- 若不指定變量值那么將顯示 $implicit 的值-->
<ng-template #otpl let-msg>
<p>{{msg}}</p>
</ng-template>
<div [ngTemplateOutlet]="atpl"
// 這里ngOutletContext綁定的是context對(duì)象
[ngOutletContext]="context">
</div>
<div [ngTemplateOutlet]="stpl"
[ngOutletContext]="context">
</div>
<div [ngTemplateOutlet]="otpl"
[ngOutletContext]="context">
</div>
`,
})
export class Code404Component implements AfterViewInit{
@ViewChild('tpl')
tplRef: TemplateRef<any>;
constructor(private vcRef: ViewContainerRef) {}
ngAfterViewInit() {
this.vcRef.createEmbeddedView(this.tplRef);
}
context = { message: 'Hello ngOutletContext!',
$implicit: 'great, Semlinker!' };
// 這里的$implicit是固定寫(xiě)法
}
先看輸出的視圖：
Hello ngOutletContext!
Hello ngOutletContext!
Hello, Semlinker!
3. ngComponentOutlet指令
聽(tīng)著名字就很爽，這不是插入視圖的，是插入組件的！
該指令使用聲明的方式，動(dòng)態(tài)加載組件。
先寫(xiě)組件，里面有兩個(gè)。。組件：
@Component({
selector: 'alert-success',
template: `
<p>Alert success</p>
`,
})
export class AlertSuccessComponent { }
@Component({
selector: 'alert-danger',
template: `
<p>Alert danger</p>
`,
})
export class AlertDangerComponent { }
@Component({
selector: 'my-app',
template: `
<h1>Angular version 4</h1>
<ng-container *ngComponentOutlet="alert"></ng-container>
<button (click)="changeComponent()">Change component</button>
`, })
export class AppComponent {
alert = AlertSuccessComponent;
changeComponent() {
this.alert = AlertDangerComponent;
}
}
當(dāng)然，還需要在模塊中聲明入口：
// app.module.ts
@NgModule({
// ...
declarations: [
AppComponent,
SignUpComponent,
AlertSuccessComponent,
AlertDangerComponent
],
entryComponents: [ // 這里面寫(xiě)指令中呀用到的組件
AlertSuccessComponent,
AlertDangerComponent
],
// ...
})
這樣就可以使用ngComponentOutlet指令來(lái)插入組件玩耍了：
<!-- 簡(jiǎn)單語(yǔ)法 --> <ng-container *ngComponentOutlet="componentTypeExpression"></ng-container> <!-- 完整語(yǔ)法 --> <ng-container *ngComponentOutlet="componentTypeExpression; injector: injectorExpression; content: contentNodesExpression;"> </ng-container>
這是一個(gè)完整語(yǔ)法簡(jiǎn)單的例子：
// ...
@Component({
selector: 'ng-component-outlet-complete-example',
template: `
<ng-container *ngComponentOutlet="CompleteComponent;
injector: myInjector;
content: myContent"></ng-container>`
})
class NgTemplateOutletCompleteExample {
// This field is necessary to expose CompleteComponent to the template.
CompleteComponent = CompleteComponent;
myInjector: Injector;
myContent = [[document.createTextNode('Ahoj')], [document.createTextNode('Svet')]];
constructor(injector: Injector) {
this.myInjector = ReflectiveInjector.resolveAndCreate([Greeter], injector);
}
}
4. 創(chuàng)建結(jié)構(gòu)指令
也想不出來(lái)一個(gè)什么好例子，抄一個(gè)例子過(guò)來(lái)：
// uless.directive.ts
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[exeUnless]'
})
export class UnlessDirective {
@Input('exeUnless')
set condition(newCondition: boolean) { // set condition
if (!newCondition) {
this.viewContainer.createEmbeddedView(this.templateRef);
} else {
this.viewContainer.clear();
}
}
constructor(private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef) {
}
}
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h2 *exeUnless="condition">Hello, Semlinker!</h2>
`,
})
export class AppComponent {
condition: boolean = false;
}
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h2 *exeUnless="condition">Hello, Semlinker!</h2>
`,
})
export class AppComponent {
condition: boolean = false;
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
angularJs中datatable實(shí)現(xiàn)代碼
本篇文章主要介紹了angularJs中datatable實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06 
AngularJS Toaster是一個(gè) AngularJS 提示框.基于angular v1.2.6 及以上和angular-animate.這篇文章主要介紹了AngularJS Toaster使用詳解,需要的朋友可以參考下
2017-02-02 
AngularJs的$http發(fā)送POST請(qǐng)求,php無(wú)法接收Post的數(shù)據(jù)問(wèn)題及解決方案
這篇文章主要介紹了AngularJs的$http發(fā)送POST請(qǐng)求,php無(wú)法接收Post的數(shù)據(jù)的問(wèn)題及解決方案,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-08-08 
Angular頁(yè)面?zhèn)鲄⒂卸喾N辦法，根據(jù)不同用例，本文介紹5種最常見(jiàn)的頁(yè)面?zhèn)鲄⒌姆绞?。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-04-04 
AngularJS中$watch和$timeout的使用示例
這篇文章給大家介紹了AngularJS中$watch和$timeout的使用例子，通過(guò)示例代碼相信更能讓大家理解，有需要的朋友們下面來(lái)一起看看吧。
2016-09-09 
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
ng-template 是用來(lái)定義模板的，當(dāng)使用ng-template定義好一個(gè)模板之后，可以用ng-container和templateOutlet指令來(lái)進(jìn)行使用。這篇文章給大家介紹了Angular中的ng-templateangular及使用 ngTemplateOutlet 指令的方法，需要的朋友參考下吧
2018-08-08 
AngularJS 輸入驗(yàn)證詳解及實(shí)例代碼
本文主要介紹AngularJS 輸入驗(yàn)證,這里對(duì)AngularJS 輸入驗(yàn)證的資料做了整理,并附簡(jiǎn)單實(shí)例代碼和效果圖,有需要的小伙伴參考下
2016-07-07 
AngularJS select加載數(shù)據(jù)選中默認(rèn)值的方法
下面小編就為大家分享一篇AngularJS select加載數(shù)據(jù)選中默認(rèn)值的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02 
利用Angular7開(kāi)發(fā)一個(gè)Radio組件的全過(guò)程
這篇文章主要給大家介紹了關(guān)于如何利用Angular7開(kāi)發(fā)一個(gè)Radio組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Angular7具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07