欧亚精品卡一卡二卡三,久久综合第一页无码,国产人妻人伦精品无码.麻豆

第一節(jié) - 創(chuàng)建指令
第二節(jié) - 定義輸入屬性
第三節(jié) - 事件處理
第四節(jié) - 獲取宿主元素屬性值
第五節(jié) - 使用 <ng-template> 元素
第六節(jié) - 使用 ngTemplateOutlet 指令
第七節(jié) - 創(chuàng)建結(jié)構(gòu)指令

閱讀須知

本系列教程的開發(fā)環(huán)境及開發(fā)語言：

Angular 4 +
Angular CLI
TypeScript

基礎(chǔ)知識

Angular CLI 基本使用

安裝 Angular CLI (可選)

npm install -g @angular/cli

創(chuà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-directive

Angular 組件組成圖

angular-component-compose

第一節(jié) - 創(chuàng)建指令

在 Angular 中，我們可以使用 HostBinding 裝飾器，實現(xiàn)元素的屬性綁定。

指令的作用

該指令用于演示如何利用 HostBinding 裝飾器，設(shè)置元素的 innerText 屬性。

指令的實現(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 裝飾器，定義指令的輸入屬性，從而實現(xiàn)讓用戶自定義問候內(nèi)容。

指令的實現(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 屬性裝飾器，實現(xiàn)元素的事件綁定。

指令的作用

該指令用于演示如何利用 HostListener 裝飾器，監(jiān)聽用戶的點擊事件。

指令的實現(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 的值。

指令的實現(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)指令

指令的功能

該指令實現(xiàn) ngIf 指令相反的效果，當(dāng)指令的輸入條件為 Falsy 值時，顯示DOM元素。

指令的實現(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)系？

組件繼承于指令，并擴展了與 UI 視圖相關(guān)的屬性，如 template、styles、animations、encapsulation 等。

詳細內(nèi)容請參考 - Angular 2 Directive Lifecycle

結(jié)構(gòu)指令中的 `TemplateRef` 與 `ViewContainerRef` 有什么作用？

TemplateRef：用于表示內(nèi)嵌的 template 模板元素，通過 TemplateRef 實例，我們可以方便創(chuàng)建內(nèi)嵌視圖(Embedded Views)，且可以輕松地訪問到通過 ElementRef 封裝后的 nativeElement。需要注意的是組件視圖中的 template 模板元素，經(jīng)過渲染后會被替換成 comment 元素。

ViewContainerRef：用于表示一個視圖容器，可添加一個或多個視圖。通ViewContainerRef 實例，我們可以基于 TemplateRef 實例創(chuàng)建內(nèi)嵌視圖，并能指定內(nèi)嵌視圖的插入位置，也可以方便對視圖容器中已有的視圖進行管理。簡而言之，ViewContainerRef 的主要作用是創(chuàng)建和管理內(nèi)嵌視圖或組件視圖。

詳細內(nèi)容請參考 - Angular 2 TemplateRef & ViewContainerRef

指令快速入門

目錄

閱讀須知

基礎(chǔ)知識

Angular CLI 基本使用

Angular 指令簡介

Angular 指令分類圖

Angular 組件組成圖

第一節(jié) - 創(chuàng)建指令

指令的作用

指令的實現(xiàn)

指令的應(yīng)用

第二節(jié) - 定義輸入屬性

指令的作用

指令的實現(xiàn)

指令的應(yīng)用

第三節(jié) - 事件處理

指令的作用

指令的實現(xiàn)

指令的應(yīng)用

第四節(jié) - 獲取宿主元素屬性值

指令的作用

指令的實現(xiàn)

指令的應(yīng)用

第五節(jié) - 使用 `<ng-template>` 元素

第六節(jié) - 使用 `ngTemplateOutlet` 指令

ngTemplateOutlet 的作用

ngTemplateOutlet 的使用

ngOutletContext 的使用

第七節(jié) - 創(chuàng)建結(jié)構(gòu)指令

指令的功能

指令的實現(xiàn)

指令的應(yīng)用

我有話說

Angular 中指令與組件有什么關(guān)系？

結(jié)構(gòu)指令中的 `TemplateRef` 與 `ViewContainerRef` 有什么作用？

指令快速入門

目錄

閱讀須知

基礎(chǔ)知識

Angular CLI 基本使用

Angular 指令簡介

Angular 指令分類圖

Angular 組件組成圖

第一節(jié) - 創(chuàng)建指令

指令的作用

指令的實現(xiàn)

指令的應(yīng)用

第二節(jié) - 定義輸入屬性

指令的作用

指令的實現(xiàn)

指令的應(yīng)用

第三節(jié) - 事件處理

指令的作用

指令的實現(xiàn)

指令的應(yīng)用

第四節(jié) - 獲取宿主元素屬性值

指令的作用

指令的實現(xiàn)

指令的應(yīng)用

第五節(jié) - 使用 <ng-template> 元素

第六節(jié) - 使用 ngTemplateOutlet 指令

ngTemplateOutlet 的作用

ngTemplateOutlet 的使用

ngOutletContext 的使用

第七節(jié) - 創(chuàng)建結(jié)構(gòu)指令

指令的功能

指令的實現(xiàn)

指令的應(yīng)用

我有話說

Angular 中指令與組件有什么關(guān)系？

結(jié)構(gòu)指令中的 TemplateRef 與 ViewContainerRef 有什么作用？

第五節(jié) - 使用 `<ng-template>` 元素

第六節(jié) - 使用 `ngTemplateOutlet` 指令

Angular 中指令與組件有什么關(guān)系？

結(jié)構(gòu)指令中的 `TemplateRef` 與 `ViewContainerRef` 有什么作用？