Angular17之Angular自定義指令詳解
1 什么是HTML
HTML文檔就是一個(gè)純文本文件，該文件包含了HTML元素、CSS樣式以及JavaScript代碼；HTML元素是由標(biāo)簽呈現(xiàn)，瀏覽器會為每個(gè)標(biāo)簽創(chuàng)建帶有屬性的DOM對象，瀏覽器通過渲染這些DOM節(jié)點(diǎn)來呈現(xiàn)內(nèi)容，用戶在瀏覽器中看到的內(nèi)容就是瀏覽器渲染DOM對象后的結(jié)果。
2 指令的分類
組件、屬性指令、結(jié)構(gòu)性指令
3 指定義指令常用到的一些常量
3.1 Directive
用于裝飾控制器類來指明該控制器類是一個(gè)自定義指令控制器類
3.2 ElementRef
作為DOM對象的引用使用，通過構(gòu)造器進(jìn)行依賴注入，它的實(shí)例代表標(biāo)注有自定義指令那個(gè)元素的DOM對象；每個(gè)標(biāo)注了自定義指令的元素都會自動擁有一個(gè)ElementRef對象來作為該元素DOM對象的引用（前提：在自定義指令的控制器中依賴注入了ElementRef）
3.3 Render2
Render2的實(shí)例是用來操作DOM節(jié)點(diǎn)的，因?yàn)锳ngular不推薦直接操作DOM節(jié)點(diǎn)；Render2是從Angular4才開始支持的，之前的版本是使用的Render；每個(gè)標(biāo)注有自定義指令的元素都會擁有一個(gè)Render2實(shí)例來操作該元素的DOM屬性（前提：在自定義指令的控制器中依賴注入了Render2）
3.4 HostListener
用于裝飾事件觸發(fā)方法的注解
4 自定義屬性指令
一個(gè)自定義的屬性指令需要一個(gè)有@Directive裝飾器進(jìn)行裝飾的控制器類
import { Directive } from '@angular/core';
@Directive({
selector: '[appDirectiveTest02]'
})
export class DirectiveTest02Directive {
constructor() { }
}
4.1 實(shí)現(xiàn)自定義屬性指令
4.1.1 創(chuàng)建自定義屬性指令控制類
技巧01：創(chuàng)建一個(gè)模塊來專門放自定義指令
ng g d directive/test/directive-test02 --spec=false --module=directive
4.1.2 在控制器類中依賴注入ElementRef
constructor(
private el: ElementRef
) {}
4.1.3 通過ElementRef實(shí)例改變標(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">實(shí)現(xiàn)自定義屬性指令</div> <div class="panel-body"> <button md-raised-button appDirectiveTest02>實(shí)現(xiàn)自定義指令的按鈕</button> <br /><br /> <button md-raised-button>未實(shí)現(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中實(shí)現(xiàn)的自定義屬性指令中背景顏色是寫死的不能更改，我們可以給指令綁定輸入屬性實(shí)現(xiàn)數(shù)據(jù)傳遞，從而達(dá)到動態(tài)改變的目的
4.2.1 在自定義屬性指令的控制器中添加一個(gè)輸入屬性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：在給輸入屬性賦值時(shí)，等號右邊如果不是一個(gè)變量就需要用單引號括起來
<div class="panel panel-primary"> <div class="panel panel-heading">實(shí)現(xiàn)自定義屬性指令</div> <div class="panel-body"> <button md-raised-button appDirectiveTest02 [myColor]="'red'">實(shí)現(xiàn)自定義指令的按鈕</button> <br /><br /> <button md-raised-button>未實(shí)現(xiàn)自定以指令的按鈕</button> </div> <div class="panel-footer">2018-1-20 22:47:06</div> </div>
4.2.3 效果展示
4.2.4 改進(jìn)
可以通過自定義屬性指令的選擇器來實(shí)現(xiàn)數(shù)據(jù)傳輸
》利用自定義屬性指令的選擇器作為輸入屬性myColor輸入屬性的別名
》在組件中直接利用自定義指令的選擇器作為輸入屬性
<div class="panel panel-primary"> <div class="panel panel-heading">實(shí)現(xiàn)自定義屬性指令</div> <div class="panel-body"> <button md-raised-button [appDirectiveTest02]="'yellow'">實(shí)現(xiàn)自定義指令的按鈕</button> <br /><br /> <button md-raised-button>未實(shí)現(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 注解并編寫一個(gè)方法
技巧01：HostListener注解可以傳入兩個(gè)參數(shù)
參數(shù)1 -> 需要監(jiān)聽的事件名稱
參數(shù)2 -> 事件觸發(fā)時(shí)傳遞的方法
@HostListener('click', ['$event'])
onClick(ev: Event) { }
4.2.2 在方法中實(shí)現(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">實(shí)現(xiàn)自定義屬性指令</div> <div class="panel-body"> <button md-raised-button appDirectiveTest02 >實(shí)現(xiàn)自定義指令的按鈕</button> <br /><br /> <button md-raised-button>未實(shí)現(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自定義指令詳解，希望對大家有所幫助，如果大家有任何疑問歡迎各我留言，小編會及時(shí)回復(fù)大家的！
- Angularjs自定義指令實(shí)現(xiàn)三級聯(lián)動 選擇地理位置
- 詳解angular2采用自定義指令（Directive）方式加載jquery插件
- 在 Angular2 中實(shí)現(xiàn)自定義校驗(yàn)指令（確認(rèn)密碼）的方法
- Angular的自定義指令以及實(shí)例
- AngularJS創(chuàng)建自定義指令的方法詳解
- AngularJS使用自定義指令替代ng-repeat的方法
- AngularJS 自定義指令詳解及實(shí)例代碼
- 自定義Angular指令與jQuery實(shí)現(xiàn)的Bootstrap風(fēng)格數(shù)據(jù)雙向綁定的單選與多選下拉框
- 深入講解AngularJS中的自定義指令的使用
- 詳解AngularJS中自定義指令的使用
相關(guān)文章
基于angular中的重要指令詳解($eval,$parse和$compile)
下面小編就為大家?guī)硪黄赼ngular中的重要指令詳解($eval,$parse和$compile)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
Angular.js中ng-include用法及多標(biāo)簽頁面的實(shí)現(xiàn)方式詳解
這篇文章主要給大家介紹了在Angular.js中ng-include用法及多標(biāo)簽頁面的實(shí)現(xiàn)方式的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，相信對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-05-05
這篇文章主要介紹了詳解Angular如何正確的操作DOM，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
Angularjs實(shí)現(xiàn)mvvm式的選項(xiàng)卡示例代碼
每位Web開發(fā)者應(yīng)該都知道，選項(xiàng)卡是現(xiàn)代web網(wǎng)頁中最常用的效果之一，所以本文重點(diǎn)是用angularjs這個(gè)非?；餸vvm框架，實(shí)現(xiàn)選項(xiàng)卡效果。有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-09-09
本篇文章主要介紹了angularJS深拷貝，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
Angular4學(xué)習(xí)之Angular CLI的安裝與使用教程
網(wǎng)上很多教程過時(shí)，命令在angular4中不適用等等，所以下面這篇文章主要給大家介紹了關(guān)于Angular4學(xué)習(xí)之Angular CLI的安裝與使用教程的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
這篇文章主要介紹了簡單說說angular.json文件的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
本文將介紹Angular子路由的用法，對此感興趣的同學(xué)，可以參考下2021-05-05
基于Angular中ng-controller父子級嵌套的相關(guān)屬性詳解
今天小編就為大家分享一篇基于Angular中ng-controller父子級嵌套的相關(guān)屬性詳解，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
AngularJS進(jìn)行性能調(diào)優(yōu)的7個(gè)建議
AnglarJS作為一款優(yōu)秀的Web框架，可大大簡化前端開發(fā)的負(fù)擔(dān)。本文給大家介紹AngularJS進(jìn)行性能調(diào)優(yōu)的7個(gè)建議，涉及到angularjs性能調(diào)優(yōu)相關(guān)知識，對本文感興趣的朋友一起學(xué)習(xí)吧2015-12-12