Angular17之Angular自定義指令詳解

更新時間：2018年01月21日 11:45:24 作者：NeverCtrl_C

這篇文章主要介紹了Angular17之 Angular自定義指令的相關(guān)知識 ,需要的朋友可以參考下

　　　　4.1.1 創(chuàng)建自定義屬性指令控制類
　　　　4.1.2 在控制器類中依賴注入ElementRef　　
　　　　4.1.3 通過ElementRef實例改變標(biāo)有自定義指令元素對應(yīng)的DOM對象的背景顏色　
　　　　4.1.3 在自定義指令模塊中指定exports

　　4.2 給自定義屬性指令綁定輸入屬性

　　4.3 響應(yīng)用戶操作

1 什么是HTML

　　HTML文檔就是一個純文本文件，該文件包含了HTML元素、CSS樣式以及JavaScript代碼；HTML元素是由標(biāo)簽呈現(xiàn)，瀏覽器會為每個標(biāo)簽創(chuàng)建帶有屬性的DOM對象，瀏覽器通過渲染這些DOM節(jié)點來呈現(xiàn)內(nèi)容，用戶在瀏覽器中看到的內(nèi)容就是瀏覽器渲染DOM對象后的結(jié)果。

2 指令的分類

　　組件、屬性指令、結(jié)構(gòu)性指令

3 指定義指令常用到的一些常量

　　3.1 Directive

　　　　用于裝飾控制器類來指明該控制器類是一個自定義指令控制器類

　　3.2 ElementRef

　　　　作為DOM對象的引用使用，通過構(gòu)造器進(jìn)行依賴注入，它的實例代表標(biāo)注有自定義指令那個元素的DOM對象；每個標(biāo)注了自定義指令的元素都會自動擁有一個ElementRef對象來作為該元素DOM對象的引用（前提：在自定義指令的控制器中依賴注入了ElementRef）

　　3.3 Render2

　　　　Render2的實例是用來操作DOM節(jié)點的，因為Angular不推薦直接操作DOM節(jié)點；Render2是從Angular4才開始支持的，之前的版本是使用的Render；每個標(biāo)注有自定義指令的元素都會擁有一個Render2實例來操作該元素的DOM屬性（前提：在自定義指令的控制器中依賴注入了Render2）

　　3.4 HostListener

　　　　用于裝飾事件觸發(fā)方法的注解

4 自定義屬性指令

　　一個自定義的屬性指令需要一個有@Directive裝飾器進(jìn)行裝飾的控制器類

import { Directive } from '@angular/core';
@Directive({
 selector: '[appDirectiveTest02]'
})
export class DirectiveTest02Directive {
 constructor() { }
}

4.1 實現(xiàn)自定義屬性指令

　　　　4.1.1 創(chuàng)建自定義屬性指令控制類

　　　　　　技巧01：創(chuàng)建一個模塊來專門放自定義指令

ng g d directive/test/directive-test02 --spec=false --module=directive

　　　　4.1.2 在控制器類中依賴注入ElementRef　　

constructor(
 private el: ElementRef
 ) {}

　　　　4.1.3 通過ElementRef實例改變標(biāo)有自定義指令元素對應(yīng)的DOM對象的背景顏色　

 ngOnInit() {
 this.el.nativeElement.style.backgroundColor = 'skyblue';
 }

　　　　4.1.3 在自定義指令模塊中指定exports　

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DirectiveTest01Directive } from './test/directive-test01.directive';
import { SharedModule } from '../shared/shared.module';
import { DirectiveTest02Directive } from './test/directive-test02.directive';
@NgModule({
 imports: [
 CommonModule
 ],
 declarations: [
 DirectiveTest01Directive,
 DirectiveTest02Directive],
 exports: [
 DirectiveTest01Directive,
 DirectiveTest02Directive
 ]
})
export class DirectiveModule { }

　　　　4.1.4 將自定義指令模塊導(dǎo)入到需要用到指定指令的組件所在的模塊中

　　　　　　技巧01：自定義指令一般會被多次用到，所以一般會將自定義指令模塊導(dǎo)入到共享模塊在從共享模塊導(dǎo)出，這樣其它模塊只需要導(dǎo)入共享模塊就可以啦

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { 
 MdToolbarModule,
 MdSidenavModule,
 MdIconModule,
 MdButtonModule,
 MdCardModule,
 MdInputModule,
 MdRadioModule,
 MdRadioButton
 } from '@angular/material';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { DirectiveModule } from '../directive/directive.module'; 
@NgModule({
 imports: [
 CommonModule,
 RouterModule,
 FormsModule,
 ReactiveFormsModule,
 HttpModule,
 MdToolbarModule,
 MdSidenavModule,
 MdIconModule,
 MdButtonModule,
 MdCardModule,
 MdInputModule,
 DirectiveModule,
 MdRadioModule
 ],
 declarations: [],
 exports: [
 CommonModule,
 RouterModule,
 FormsModule,
 ReactiveFormsModule,
 HttpModule,
 MdToolbarModule,
 MdSidenavModule,
 MdIconModule,
 MdButtonModule,
 MdCardModule,
 MdInputModule,
 DirectiveModule,
 MdRadioButton
 ]
})
export class SharedModule { }

　　　　4.1.5 在組件中使用自定組件對應(yīng)的選擇器即可

　　　　　　自定義指令的選擇器是由@Directive裝飾器的selector元數(shù)據(jù)指定的

　在元素中直接標(biāo)注自定義指令的選擇器就行啦　　

<div class="panel panel-primary">
 <div class="panel panel-heading">實現(xiàn)自定義屬性指令</div>
 <div class="panel-body">
 <button md-raised-button appDirectiveTest02>實現(xiàn)自定義指令的按鈕</button>
 <br /><br />
 <button md-raised-button>未實現(xiàn)自定以指令的按鈕</button>
 </div>
 <div class="panel-footer">2018-1-20 22:47:06</div>
</div>

　　　　4.1.6 代碼匯總

import { Directive, ElementRef } from '@angular/core';
import { OnInit } from '../../../../node_modules/_@angular_core@4.4.6@@angular/core/src/metadata/lifecycle_hooks';
@Directive({
 selector: '[appDirectiveTest02]'
})
export class DirectiveTest02Directive implements OnInit {
 constructor(
 private el: ElementRef
 ) {}
 ngOnInit() {
 this.el.nativeElement.style.backgroundColor = 'skyblue';
 }
}

　　4.2 給自定義屬性指令綁定輸入屬性

　　　　在4.1中實現(xiàn)的自定義屬性指令中背景顏色是寫死的不能更改，我們可以給指令綁定輸入屬性實現(xiàn)數(shù)據(jù)傳遞，從而達(dá)到動態(tài)改變的目的

　　　　4.2.1 在自定義屬性指令的控制器中添加一個輸入屬性myColor

import { Directive, ElementRef, OnInit, Input } from '@angular/core';
@Directive({
 selector: '[appDirectiveTest02]'
})
export class DirectiveTest02Directive implements OnInit {
 @Input()
 myColor: string;
 constructor(
 private el: ElementRef
 ) {}
 ngOnInit() {
 this.el.nativeElement.style.backgroundColor = this.myColor;
 }
}

　　　　4.2.2 在組件中給myColor屬性賦值

　　　　　　技巧01：在給輸入屬性賦值時，等號右邊如果不是一個變量就需要用單引號括起來

<div class="panel panel-primary">
 <div class="panel panel-heading">實現(xiàn)自定義屬性指令</div>
 <div class="panel-body">
 <button md-raised-button appDirectiveTest02 [myColor]="'red'">實現(xiàn)自定義指令的按鈕</button>
 <br /><br />
 <button md-raised-button>未實現(xiàn)自定以指令的按鈕</button>
 </div>
 <div class="panel-footer">2018-1-20 22:47:06</div>
</div>

　　　　4.2.3 效果展示

　　　　4.2.4 改進(jìn)

　　　　　　可以通過自定義屬性指令的選擇器來實現(xiàn)數(shù)據(jù)傳輸

　　　　　　》利用自定義屬性指令的選擇器作為輸入屬性myColor輸入屬性的別名

　　　　　　》在組件中直接利用自定義指令的選擇器作為輸入屬性

<div class="panel panel-primary">
 <div class="panel panel-heading">實現(xiàn)自定義屬性指令</div>
 <div class="panel-body">
 <button md-raised-button [appDirectiveTest02]="'yellow'">實現(xiàn)自定義指令的按鈕</button>
 <br /><br />
 <button md-raised-button>未實現(xiàn)自定以指令的按鈕</button>
 </div>
 <div class="panel-footer">2018-1-20 22:47:06</div>
</div>

　　　　　　》效果展示　　　

　　4.3 響應(yīng)用戶操作

　　　　在自定義屬性指令中通過監(jiān)聽DOM對象事件來進(jìn)行一些操作

　　　　4.2.1 引入 HostListener 注解并編寫一個方法　　　　

　　　　　　技巧01：HostListener注解可以傳入兩個參數(shù)

　　　　　　　　參數(shù)1 -> 需要監(jiān)聽的事件名稱

　　　　　　　　參數(shù)2 -> 事件觸發(fā)時傳遞的方法

 @HostListener('click', ['$event'])
 onClick(ev: Event) {  }

　　　　4.2.2 在方法中實現(xiàn)一些操作

@HostListener('click', ['$event'])
 onClick(ev: Event) {
 if (this.el.nativeElement === ev.target) {
 if (this.el.nativeElement.style.backgroundColor === 'green') {
 this.el.nativeElement.style.backgroundColor = 'skyblue';
 } else {
 this.el.nativeElement.style.backgroundColor = 'green';
 }
 }
 // if (this.el.nativeElement.style.backgroundColor === 'yellow') {
 // this.el.nativeElement.style.backgroundColor = 'green';
 // } else {
 // this.el.nativeElement.style.backgroundColor = 'yellow';
 // }
 }

　　　　4.2.3 在組件中標(biāo)記自定義屬性指令的選擇器就可以啦

<div class="panel panel-primary">
 <div class="panel panel-heading">實現(xiàn)自定義屬性指令</div>
 <div class="panel-body">
 <button md-raised-button appDirectiveTest02 >實現(xiàn)自定義指令的按鈕</button>
 <br /><br />
 <button md-raised-button>未實現(xiàn)自定以指令的按鈕</button>
 </div>
 <div class="panel-footer">2018-1-20 22:47:06</div>
</div>

　　　　4.2.4 代碼匯總

import { Directive, ElementRef, OnInit, Input, HostListener } from '@angular/core';
@Directive({
 selector: '[appDirectiveTest02]'
})
export class DirectiveTest02Directive implements OnInit {
 constructor(
 private el: ElementRef
 ) {}
 ngOnInit() {
 }
 @HostListener('click', ['$event'])
 onClick(ev: Event) {
 if (this.el.nativeElement === ev.target) {
 if (this.el.nativeElement.style.backgroundColor === 'green') {
 this.el.nativeElement.style.backgroundColor = 'skyblue';
 } else {
 this.el.nativeElement.style.backgroundColor = 'green';
 }
 }
 // if (this.el.nativeElement.style.backgroundColor === 'yellow') {
 // this.el.nativeElement.style.backgroundColor = 'green';
 // } else {
 // this.el.nativeElement.style.backgroundColor = 'yellow';
 // }
 }
}

總結(jié)

以上所述是小編給大家介紹的Angular17之Angular自定義指令詳解，希望對大家有所幫助，如果大家有任何疑問歡迎各我留言，小編會及時回復(fù)大家的！

您可能感興趣的文章: