HTML文檔就是一個純文本文件，該文件包含了HTML元素、CSS樣式以及JavaScript代碼；HTML元素是由標簽呈現，瀏覽器會為每個標簽創建帶有屬性的DOM對象，瀏覽器通過渲染這些DOM節點來呈現內容，用戶在瀏覽器中看到的內容就是瀏覽器渲染DOM對象后的結果。
組件、屬性指令、結構性指令
用于裝飾控制器類來指明該控制器類是一個自定義指令控制器類
作為DOM對象的引用使用，通過構造器進行依賴注入，它的實例代表標注有自定義指令那個元素的DOM對象；每個標注了自定義指令的元素都會自動擁有一個ElementRef對象來作為該元素DOM對象的引用（前提：在自定義指令的控制器中依賴注入了ElementRef）
Render2的實例是用來操作DOM節點的，因為Angular不推薦直接操作DOM節點；Render2是從Angular4才開始支持的，之前的版本是使用的Render；每個標注有自定義指令的元素都會擁有一個Render2實例來操作該元素的DOM屬性（前提：在自定義指令的控制器中依賴注入了Render2）
用于裝飾事件觸發方法的注解
一個自定義的屬性指令需要一個有@Directive裝飾器進行裝飾的控制器類
import { Directive } from '@angular/core';@Directive({ selector: '[appDirectiveTest02]'})export class DirectiveTest02Directive { constructor() { }}技巧01：創建一個模塊來專門放自定義指令
ng g d directive/test/directive-test02 --spec=false --module=directive
constructor( private el: ElementRef ) {} ngOnInit() { this.el.nativeElement.style.backgroundColor = 'skyblue'; }
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 將自定義指令模塊導入到需要用到指定指令的組件所在的模塊中
技巧01：自定義指令一般會被多次用到，所以一般會將自定義指令模塊導入到共享模塊在從共享模塊導出，這樣其它模塊只需要導入共享模塊就可以啦
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 在組件中使用自定組件對應的選擇器即可
自定義指令的選擇器是由@Directive裝飾器的selector元數據指定的
在元素中直接標注自定義指令的選擇器就行啦
<div class="panel panel-primary"> <div class="panel panel-heading">實現自定義屬性指令</div> <div class="panel-body"> <button md-raised-button appDirectiveTest02>實現自定義指令的按鈕</button> <br /><br /> <button md-raised-button>未實現自定以指令的按鈕</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.1中實現的自定義屬性指令中背景顏色是寫死的不能更改，我們可以給指令綁定輸入屬性實現數據傳遞，從而達到動態改變的目的
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">實現自定義屬性指令</div> <div class="panel-body"> <button md-raised-button appDirectiveTest02 [myColor]="'red'">實現自定義指令的按鈕</button> <br /><br /> <button md-raised-button>未實現自定以指令的按鈕</button> </div> <div class="panel-footer">2018-1-20 22:47:06</div></div>
4.2.3 效果展示
4.2.4 改進
可以通過自定義屬性指令的選擇器來實現數據傳輸
》利用自定義屬性指令的選擇器作為輸入屬性myColor輸入屬性的別名
》在組件中直接利用自定義指令的選擇器作為輸入屬性
<div class="panel panel-primary"> <div class="panel panel-heading">實現自定義屬性指令</div> <div class="panel-body"> <button md-raised-button [appDirectiveTest02]="'yellow'">實現自定義指令的按鈕</button> <br /><br /> <button md-raised-button>未實現自定以指令的按鈕</button> </div> <div class="panel-footer">2018-1-20 22:47:06</div></div>
》 效果展示
在自定義屬性指令中通過監聽DOM對象事件來進行一些操作
4.2.1 引入 HostListener 注解并編寫一個方法
技巧01：HostListener注解可以傳入兩個參數
參數1 -> 需要監聽的事件名稱
參數2 -> 事件觸發時傳遞的方法
@HostListener('click', ['$event']) onClick(ev: Event) { }
4.2.2 在方法中實現一些操作
@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 在組件中標記自定義屬性指令的選擇器就可以啦
<div class="panel panel-primary"> <div class="panel panel-heading">實現自定義屬性指令</div> <div class="panel-body"> <button md-raised-button appDirectiveTest02 >實現自定義指令的按鈕</button> <br /><br /> <button md-raised-button>未實現自定以指令的按鈕</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'; // } }}總結
以上所述是小編給大家介紹的Angular17之Angular自定義指令詳解，希望對大家有所幫助，如果大家有任何疑問歡迎各我留言，小編會及時回復大家的！
新聞熱點
疑難解答
