欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angular 4 指令快速入門教程

 更新時間:2017年06月07日 09:52:19   作者:semlinker  
本篇文章主要介紹了Angular 4 指令快速入門教程,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

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

  1. Angular 4 +
  2. Angular CLI
  3. 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 的指令分為三種:

  1. 組件(Component directive):用于構(gòu)建UI組件,繼承于 Directive 類
  2. 屬性指令(Attribute directive):用于改變組件的外觀或行為
  3. 結(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ù)報功能示例

    這篇文章主要介紹了Angular實(shí)現(xiàn)的簡單查詢天氣預(yù)報功能,涉及AngularJS針對第三方API接口交互的相關(guān)操作技巧,需要的朋友可以參考下
    2017-12-12
  • AngularJS過濾器filter用法分析

    AngularJS過濾器filter用法分析

    這篇文章主要介紹了AngularJS過濾器filter用法,結(jié)合實(shí)例形式分析了過濾器filter的功能、分類、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
    2016-12-12
  • angularjs的一些優(yōu)化小技巧

    angularjs的一些優(yōu)化小技巧

    這篇文章主要介紹了angularjs的一些優(yōu)化小技巧,本文總結(jié)了5種優(yōu)化技巧,如一次綁定、盡可能少調(diào)用 ng-repeat、盡量在指令里寫原生語法、頁面內(nèi)盡量少用filters等,需要的朋友可以參考下
    2014-12-12
  • Angularjs中三種數(shù)據(jù)的綁定策略(“@”,“=”,“&”)

    Angularjs中三種數(shù)據(jù)的綁定策略(“@”,“=”,“&”)

    在AngularJS的指令中存在著三種綁定策略,他們分別是’=’,’@’,’&’。下面這篇文章主要介紹了Angularjs中這三種數(shù)據(jù)的綁定策略,有需要的朋友們可以參考借鑒,下面來一起看看吧。
    2016-12-12
  • AngularJS ng-mousedown 指令

    AngularJS ng-mousedown 指令

    本文主要介紹AngularJS ng-mousedown 指令,這里幫大家整理了ng-mousedown 指令的基本資料,并附代碼示例,有需要的朋友可以參考下
    2016-08-08
  • Angular搜索場景中使用rxjs的操作符處理思路

    Angular搜索場景中使用rxjs的操作符處理思路

    這篇文章主要介紹了Angular搜索場景中使用rxjs的操作符處理思路,主要的思路就是通過Subject來發(fā)送過濾條件,這樣就可以使用rxjs的各種操作符,可以快捷很多。需要的朋友可以參考下
    2018-05-05
  • Angular2 組件間通過@Input @Output通訊示例

    Angular2 組件間通過@Input @Output通訊示例

    本篇文章主要介紹了Angular2 組件間通過@Input @Output通訊示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • 總結(jié)十個Angular.js由淺入深的面試問題

    總結(jié)十個Angular.js由淺入深的面試問題

    這篇文章雖然只有10個問題,但是覆蓋了angular開發(fā)中的各個方面,有基本的知識點(diǎn),也有在開發(fā)過程中遇見的問題,同時也有較為開放性的問題去辨別面試者的基礎(chǔ)水準(zhǔn)和項(xiàng)目經(jīng)驗(yàn),注意答案僅供參考哦~
    2016-08-08
  • AngularJS中的按需加載ocLazyLoad示例

    AngularJS中的按需加載ocLazyLoad示例

    本篇文章主要介紹了AngularJS中的按需加載ocLazyLoad,具有一定的參考價值,感興趣的小伙伴們可以參考一下。
    2017-01-01
  • Angular中ng-repeat與ul li的多層嵌套重復(fù)問題

    Angular中ng-repeat與ul li的多層嵌套重復(fù)問題

    這篇文章主要介紹了Angular中ng-repeat與ul li的多層嵌套重復(fù)問題,需要的朋友可以參考下
    2017-07-07

最新評論