Angular17 Angular自定義指令
1 什麽是HTML
HTML文檔就是一個純文本文件，該文件包含了HTML元素、CSS樣式以及JavaScript代碼；HTML元素是由標簽呈現，瀏覽器會為每個標簽創建帶有屬性的DOM對象，瀏覽器通過渲染這些DOM節點來呈現內容，用戶在瀏覽器中看到的內容就是瀏覽器渲染DOM對象後的結果。
2 指令的分類
組件、屬性指令、結構性指令
具體的知識點請參見《Angular2揭秘》
3 指定義指令常用到的一些常量
3.1 Directive
用於裝飾控制器類來指明該控制器類是一個自定義指令控制器類
3.2 ElementRef
作為DOM對象的引用使用，通過構造器進行依賴註入，它的實例代表標註有自定義指令那個元素的DOM對象；每個標註了自定義指令的元素都會自動擁有一個ElementRef對象來作為該元素DOM對象的引用（前提：在自定義指令的控制器中依賴註入了ElementRef）
3.3 Render2
Render2的實例是用來操作DOM節點的，因為Angular不推薦直接操作DOM節點；Render2是從Angular4才開始支持的，之前的版本是使用的Render；每個標註有自定義指令的元素都會擁有一個Render2實例來操作該元素的DOM屬性（前提：在自定義指令的控制器中依賴註入了Render2）
3.4 HostListener
用於裝飾事件觸發方法的註解
4 自定義屬性指令
一個自定義的屬性指令需要一個有@Directive裝飾器進行裝飾的控制器類
import { Directive } from ‘@angular/core‘;
@Directive({
selector:
4.1 實現自定義屬性指令
4.1.1 創建自定義屬性指令控制類
技巧01：創建一個模塊來專門放自定義指令
ng g d directive/test/directive-test02 --spec=false --module=directive
4.1.2 在控制器類中依賴註入ElementRef
constructor( private el: ElementRef ) {}
4.1.3 通過ElementRef實例改變標有自定義指令元素對應的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 { }
View Code
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 { }
View Code
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>
View Code
4.1.6 代碼匯總
import { Directive, ElementRef } from ‘@angular/core‘;
import { OnInit } from ‘../../../../node_modules/_@[email protected]@@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中實現的自定義屬性指令中背景顏色是寫死的不能更改，我們可以給指令綁定輸入屬性實現數據傳遞，從而達到動態改變的目的
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;
}
}
View Code
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>
View Code
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>
View Code
》 效果展示
4.3 響應用戶操作
daigengxin......2018-1-20 23:25:11
Angular17 Angular自定義指令