Angular17裡的自訂指令使用詳解-js教程-PHP中文網

這次帶給大家Angular17裡的自訂指令使用詳解，使用Angular17裡自訂的注意事項有哪些，以下就是實戰案例，一起來看一下。

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: '[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

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元資料指定的

在元素中直接標註自訂指令的選擇器就行啦

<p class="panel panel-primary">
  <p class="panel panel-heading">实现自定义属性指令</p>
  <p class="panel-body">
    <button md-raised-button appDirectiveTest02>实现自定义指令的按钮</button>
    <br /><br />
    <button md-raised-button>未实现自定以指令的按钮</button>
  </p>
  <p class="panel-footer">2018-1-20 22:47:06</p>
</p>

登入後複製

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

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：在给输入属性赋值时，等号右边如果不是一个变量就需要用单引号括起来
View Code
4.2.3 效果展示

4.2.4 改进

可以通过自定义属性指令的选择器来实现数据传输

》利用自定义属性指令的选择器作为输入属性myColor输入属性的别名

》在组件中直接利用自定义指令的选择器作为输入属性

View Code
》效果展示

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';
 // }
 }

登入後複製

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！