Angular 4 指令快速入門教程
本系列教程的開發(fā)環(huán)境及開發(fā)語言:
- Angular 4 +
- Angular CLI
- TypeScript
基礎(chǔ)知識
Angular CLI 基本使用
安裝 Angular CLI (可選)
npm install -g @angular/cli
創(chuàng)建新的項(xiàng)目
ng new PROJECT-NAME
啟動本地服務(wù)器
cd PROJECT-NAME ng serve
Angular 指令簡介
Angular 的指令分為三種:
- 組件(Component directive):用于構(gòu)建UI組件,繼承于 Directive 類
- 屬性指令(Attribute directive):用于改變組件的外觀或行為
- 結(jié)構(gòu)指令(Structural directive):用于動態(tài)添加或刪除 DOM 元素來改變 DOM 布局
Angular 指令分類圖
Angular 組件組成圖
第一節(jié) - 創(chuàng)建指令
在 Angular 中,我們可以使用 HostBinding
裝飾器,實(shí)現(xiàn)元素的屬性綁定。
指令的作用
該指令用于演示如何利用 HostBinding
裝飾器,設(shè)置元素的 innerText
屬性。
指令的實(shí)現(xiàn)
import { Directive, HostBinding} from '@angular/core'; @Directive({ selector: '[greet]' }) export class GreetDirective { @HostBinding() innerText = 'Hello, Everyone!'; } 指令的應(yīng)用 import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h2>Hello, Angular</h2> <h2 greet>Hello, Angular</h2> `, }) export class AppComponent { }
第二節(jié) - 定義輸入屬性
為了能夠讓用戶自定義 GreetDirective
指令的問候內(nèi)容,我們需要使用 Input
裝飾器去定義指令的輸入屬性。
指令的作用
該指令用于演示如何利用 Input
裝飾器,定義指令的輸入屬性,從而實(shí)現(xiàn)讓用戶自定義問候內(nèi)容。
指令的實(shí)現(xiàn)
import { Directive, HostBinding, Input } from '@angular/core'; @Directive({ selector: '[greet]' }) export class GreetDirective { @Input() greet: string; @HostBinding() get innerText() { return this.greet; } }
指令的應(yīng)用
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h2>Hello, Angular</h2> <h2 [greet]="'Hello, Semlinker!'">Hello, Angular</h2> `, }) export class AppComponent { }
第三節(jié) - 事件處理
在 Angular 中,我們可以使用 HostListener
屬性裝飾器,實(shí)現(xiàn)元素的事件綁定。
指令的作用
該指令用于演示如何利用 HostListener
裝飾器,監(jiān)聽用戶的點(diǎn)擊事件。
指令的實(shí)現(xiàn)
import { Directive, HostBinding, HostListener, Input } from '@angular/core'; @Directive({ selector: '[greet]' }) export class GreetDirective { @Input() greet: string; @HostBinding() get innerText() { return this.greet; } @HostListener('click',['$event']) onClick(event) { this.greet = 'Clicked!'; } }
指令的應(yīng)用
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h2>Hello, Angular</h2> <h2 [greet]="'Hello, Semlinker!'">Hello, Angular</h2> `, }) export class AppComponent { }
第四節(jié) - 獲取宿主元素屬性值
在 Angular 中,我們可以通過 Attribute
裝飾器來獲取指令宿主元素的屬性值。
指令的作用
該指令用于演示如何利用 Attribute
裝飾器,獲取指令宿主元素上的自定義屬性 author
的值。
指令的實(shí)現(xiàn)
import { Directive, HostBinding, HostListener, Input, Attribute } from '@angular/core'; @Directive({ selector: '[greet]' }) export class GreetDirective { @Input() greet: string; @HostBinding() get innerText() { return this.greet; } @HostListener('click',['$event']) onClick(event) { this.greet = 'Clicked!'; console.dir(event); } constructor(@Attribute('author') public author: string) { console.log(author); } }
指令的應(yīng)用
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h2>Hello, Angular</h2> <h2 [greet]="'Hello, Semlinker!'" author="semlinker">Hello, Angular</h2> `, }) export class AppComponent { }
第五節(jié) - 使用 <ng-template> 元素
在 Angular 中,我們可以通過 ViewChild
裝飾器來獲取視圖中定義的模板元素,然后利用 ViewContainerRef
對象的 createEmbeddedView()
方法,創(chuàng)建內(nèi)嵌視圖。
import { Component, TemplateRef, ViewContainerRef, ViewChild, AfterViewInit } from '@angular/core'; @Component({ selector: 'app-root', template: ` <ng-template #tpl> Hello, Semlinker! </ng-template> `, }) export class AppComponent implements AfterViewInit{ @ViewChild('tpl') tplRef: TemplateRef<any>; constructor(private vcRef: ViewContainerRef) {} ngAfterViewInit() { this.vcRef.createEmbeddedView(this.tplRef); } }
第六節(jié) - 使用 ngTemplateOutlet 指令
ngTemplateOutlet 的作用
該指令用于基于已有的 TemplateRef 對象,插入對應(yīng)的內(nèi)嵌視圖。在應(yīng)用 NgTemplateOutlet 指令時,我們可以通過 [ngTemplateOutletContext] 屬性來設(shè)置 EmbeddedViewRef 的上下文對象。綁定的上下文應(yīng)該是一個對象,此外可通過 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é) - 創(chuàng)建結(jié)構(gòu)指令
指令的功能
該指令實(shí)現(xiàn) ngIf
指令相反的效果,當(dāng)指令的輸入條件為 Falsy
值時,顯示DOM元素。
指令的實(shí)現(xiàn)
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'; @Directive({ selector: '[exeUnless]' }) export class UnlessDirective { @Input('exeUnless') set condition(newCondition: boolean) { if (!newCondition) { this.viewContainer.createEmbeddedView(this.templateRef); } else { this.viewContainer.clear(); } } constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) { } }
指令的應(yīng)用
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h2 *exeUnless="condition">Hello, Semlinker!</h2> `, }) export class AppComponent { condition: boolean = false; }
我有話說
Angular 中指令與組件有什么關(guān)系?
組件繼承于指令,并擴(kuò)展了與 UI 視圖相關(guān)的屬性,如 template、styles、animations、encapsulation 等。
結(jié)構(gòu)指令中的 TemplateRef 與 ViewContainerRef 有什么作用?
TemplateRef:用于表示內(nèi)嵌的 template 模板元素,通過 TemplateRef 實(shí)例,我們可以方便創(chuàng)建內(nèi)嵌視圖(Embedded Views),且可以輕松地訪問到通過 ElementRef 封裝后的 nativeElement。需要注意的是組件視圖中的 template 模板元素,經(jīng)過渲染后會被替換成 comment 元素。
ViewContainerRef:用于表示一個視圖容器,可添加一個或多個視圖。通ViewContainerRef 實(shí)例,我們可以基于 TemplateRef 實(shí)例創(chuàng)建內(nèi)嵌視圖,并能指定內(nèi)嵌視圖的插入位置,也可以方便對視圖容器中已有的視圖進(jìn)行管理。簡而言之,ViewContainerRef 的主要作用是創(chuàng)建和管理內(nèi)嵌視圖或組件視圖。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Angular實(shí)現(xiàn)的簡單查詢天氣預(yù)報功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)的簡單查詢天氣預(yù)報功能,涉及AngularJS針對第三方API接口交互的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12Angularjs中三種數(shù)據(jù)的綁定策略(“@”,“=”,“&”)
在AngularJS的指令中存在著三種綁定策略,他們分別是’=’,’@’,’&’。下面這篇文章主要介紹了Angularjs中這三種數(shù)據(jù)的綁定策略,有需要的朋友們可以參考借鑒,下面來一起看看吧。2016-12-12Angular2 組件間通過@Input @Output通訊示例
本篇文章主要介紹了Angular2 組件間通過@Input @Output通訊示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08Angular中ng-repeat與ul li的多層嵌套重復(fù)問題
這篇文章主要介紹了Angular中ng-repeat與ul li的多層嵌套重復(fù)問題,需要的朋友可以參考下2017-07-07