Angular17之Angular自定義指令詳解

發布時間：2020-08-30 14:46:26 來源：腳本之家閱讀：256 作者：NeverCtrl_C 欄目：web開發

1 什么是HTML

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

2 指令的分類

　　組件、屬性指令、結構性指令

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: '[appDirectiveTest02]'
})
export class DirectiveTest02Directive {
 constructor() { }
}

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　

Angular17之Angular自定義指令詳解　　　　

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：自定義指令一般會被多次用到，所以一般會將自定義指令模塊導入到共享模塊在從共享模塊導出，這樣其它模塊只需要導入共享模塊就可以啦

Angular17之Angular自定義指令詳解

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元數據指定的

Angular17之Angular自定義指令詳解

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

Angular17之Angular自定義指令詳解　　　　

<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.2 給自定義屬性指令綁定輸入屬性

　　　　在4.1中實現的自定義屬性指令中背景顏色是寫死的不能更改，我們可以給指令綁定輸入屬性實現數據傳遞，從而達到動態改變的目的

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

Angular17之Angular自定義指令詳解

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：在給輸入屬性賦值時，等號右邊如果不是一個變量就需要用單引號括起來

Angular17之Angular自定義指令詳解

<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 效果展示

Angular17之Angular自定義指令詳解

　　　　4.2.4 改進

　　　　　　可以通過自定義屬性指令的選擇器來實現數據傳輸

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

Angular17之Angular自定義指令詳解

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

Angular17之Angular自定義指令詳解

<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>

　　　　　　》效果展示　　　

Angular17之Angular自定義指令詳解　

　　4.3 響應用戶操作

　　　　在自定義屬性指令中通過監聽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 在組件中標記自定義屬性指令的選擇器就可以啦

Angular17之Angular自定義指令詳解

<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自定義指令詳解，希望對大家有所幫助，如果大家有任何疑問歡迎各我留言，小編會及時回復大家的！

向AI問一下細節

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

Angular17之Angular自定義指令詳解

1 什么是HTML

2 指令的分類

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

3.1 Directive

3.2 ElementRef

3.3 Render2

3.4 HostListener

4 自定義屬性指令

4.1 實現自定義屬性指令

4.1.1 創建自定義屬性指令控制類

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

4.1.3 通過ElementRef實例改變標有自定義指令元素對應的DOM對象的背景顏色

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

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

4.3 響應用戶操作

猜你喜歡

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

Angular17之Angular自定義指令詳解

1 什么是HTML

2 指令的分類

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

3.1 Directive

3.2 ElementRef

3.3 Render2

3.4 HostListener

4 自定義屬性指令

4.1 實現自定義屬性指令

4.1.1 創建自定義屬性指令控制類

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

4.1.3 通過ElementRef實例改變標有自定義指令元素對應的DOM對象的背景顏色

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

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

4.3 響應用戶操作

猜你喜歡

最新資訊

相關推薦

相關標簽

　　3.1 Directive

　　3.2 ElementRef

　　3.3 Render2

　　3.4 HostListener

　　　　4.1.1 創建自定義屬性指令控制類

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

　　　　4.1.3 通過ElementRef實例改變標有自定義指令元素對應的DOM對象的背景顏色　

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

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

　　4.3 響應用戶操作