建了个群有兴趣的朋友能够加一下 QQ 群:Angular 修仙之路(1)群 - 153742079 (已满),请加 Angular 修仙之路(2)群 - 648681235。
<ng-template>
元素ngTemplateOutlet
指令本系列教程的开发环境及开发语言:html
npm install -g @angular/cli
ng new PROJECT-NAME
cd PROJECT-NAME ng serve
Angular 的指令分为三种:git
DOM
元素来改变 DOM
布局
在 Angular 中,咱们能够使用 HostBinding
装饰器,实现元素的属性绑定。github
该指令用于演示如何利用 HostBinding
装饰器,设置元素的 innerText
属性。typescript
import { Directive, HostBinding} from '@angular/core'; @Directive({ selector: '[greet]' }) export class GreetDirective { @HostBinding() innerText = 'Hello, Everyone!'; }
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h2>Hello, Angular</h2> <h2 greet>Hello, Angular</h2> `, }) export class AppComponent { }
为了可以让用户自定义 GreetDirective
指令的问候内容,咱们须要使用 Input
装饰器去定义指令的输入属性。npm
该指令用于演示如何利用 Input
装饰器,定义指令的输入属性,从而实现让用户自定义问候内容。segmentfault
import { Directive, HostBinding, Input } from '@angular/core'; @Directive({ selector: '[greet]' }) export class GreetDirective { @Input() greet: string; @HostBinding() get innerText() { return this.greet; } }
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h2>Hello, Angular</h2> <h2 [greet]="'Hello, Semlinker!'">Hello, Angular</h2> `, }) export class AppComponent { }
在 Angular 中,咱们能够使用 HostListener
属性装饰器,实现元素的事件绑定。服务器
该指令用于演示如何利用 HostListener
装饰器,监听用户的点击事件。app
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!'; } }
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h2>Hello, Angular</h2> <h2 [greet]="'Hello, Semlinker!'">Hello, Angular</h2> `, }) export class AppComponent { }
在 Angular 中,咱们能够经过 Attribute
装饰器来获取指令宿主元素的属性值。less
该指令用于演示如何利用 Attribute
装饰器,获取指令宿主元素上的自定义属性 author
的值。布局
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); } }
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 { }
<ng-template>
元素在 Angular 中,咱们能够经过 ViewChild
装饰器来获取视图中定义的模板元素,而后利用 ViewContainerRef
对象的 createEmbeddedView()
方法,建立内嵌视图。
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); } }
ngTemplateOutlet
指令该指令用于基于已有的 TemplateRef
对象,插入对应的内嵌视图。在应用 NgTemplateOutlet 指令时,咱们能够经过 [ngTemplateOutletContext]
属性来设置 EmbeddedViewRef
的上下文对象。绑定的上下文应该是一个对象,此外可经过 let
语法来声明绑定上下文对象属性名。
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 { }
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" [ngTemplateOutletContext]="context"> </div> <div [ngTemplateOutlet]="stpl" [ngTemplateOutletContext]="context"> </div> <div [ngTemplateOutlet]="otpl" [ngTemplateOutletContext]="context"> </div> `, }) export class AppComponent { context = { message: 'Hello ngOutletContext!', $implicit: 'Hello, Semlinker!' }; }
该指令实现 ngIf
指令相反的效果,当指令的输入条件为 Falsy
值时,显示DOM元素。
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) { } }
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h2 *exeUnless="condition">Hello, Semlinker!</h2> `, }) export class AppComponent { condition: boolean = false; }
组件继承于指令,并扩展了与 UI 视图相关的属性,如 template、styles、animations、encapsulation 等。
详细内容请参考 - Angular 2 Directive Lifecycle
TemplateRef
与 ViewContainerRef
有什么做用?TemplateRef:用于表示内嵌的 template 模板元素,经过 TemplateRef 实例,咱们能够方便建立内嵌视图(Embedded Views),且能够轻松地访问到经过 ElementRef 封装后的 nativeElement。须要注意的是组件视图中的 template 模板元素,通过渲染后会被替换成 comment 元素。
ViewContainerRef:用于表示一个视图容器,可添加一个或多个视图。通ViewContainerRef 实例,咱们能够基于 TemplateRef 实例建立内嵌视图,并能指定内嵌视图的插入位置,也能够方便对视图容器中已有的视图进行管理。简而言之,ViewContainerRef 的主要做用是建立和管理内嵌视图或组件视图。
详细内容请参考 - Angular 2 TemplateRef & ViewContainerRef