Angular17 Angular自訂指令，angular17angular

Angular17 Angular自訂指令，angular17angular

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

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

<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

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

　　　　4.2.3 在組件中標記自訂屬性指令的選取器就可以啦

View Code

　　　　4.2.4 代碼匯總

View Code