Explication détaillée de l'utilisation des instructions personnalisées dans Angular17

Cette fois, je vais vous apporter une explication détaillée de l'utilisation des instructions personnalisées dans Angular17 Quelles sont les précautions lors de l'utilisation d'instructions personnalisées dans Angular17 Voici des cas pratiques, jetons un coup d'œil ? .

1 Qu'est-ce que le HTML

Le document HTML est un fichier texte brut qui contient des éléments HTML, des styles CSS et des codes JavaScript ; les éléments HTML sont rendus par des balises, et le navigateur crée chaque balise. un objet DOM avec des attributs. Le navigateur restitue le contenu en rendant ces nœuds DOM. Le contenu que l'utilisateur voit dans le navigateur est le résultat du rendu par le navigateur de l'objet DOM.

2 Classement des consignes

 Composants, directives d'attributs, directives structurelles

 Pour des points de connaissances spécifiques, veuillez vous référer à "Angular2 Revealed"

3 fait référence à certaines constantes couramment utilisées dans la définition des instructions

  Directive 3.1

Utilisé pour décorer la classe du contrôleur pour indiquer que la classe du contrôleur est une classe de contrôleur de commande personnalisée

  3.2 ElementRef

Utilisée comme référence à un objet DOM, l'injection de dépendances est effectuée via le constructeur. Son instance représente l'objet DOM de l'élément marqué d'une instruction personnalisée ; chaque élément marqué d'une instruction personnalisée aura automatiquement un ElementRef ; object. comme référence à l'objet DOM de l'élément (prérequis : ElementRef est injecté de manière dépendante dans le contrôleur de l'instruction personnalisée)

  3.3 Rendu2

Les instances de Render2 sont utilisées pour faire fonctionner les nœuds DOM, car Angular ne recommande pas d'utiliser directement les nœuds DOM ; Render2 n'est pris en charge qu'à partir d'Angular4, et les versions précédentes utilisaient Render ; chaque élément marqué d'une instruction personnalisée aura une instance Render2 pour faire fonctionner les attributs DOM ; de l'élément (prérequis : Render2 est une dépendance injectée dans le contrôleur de la directive personnalisée)

  3.4 HostListener

Annotations utilisées pour agrémenter les méthodes de déclenchement d'événements

4 instructions d'attribut personnalisé

 Une directive d'attribut personnalisée nécessite une classe de contrôleur décorée avec le décorateur @Directive

import { Directive } from '@angular/core';
@Directive({
 selector: '[appDirectiveTest02]'
})
export class DirectiveTest02Directive {
 constructor() { }
}

4.1 Implémenter les instructions d'attribut personnalisé

    4.1.1 Créer une classe de contrôle d'instructions d'attribut personnalisée

Astuce 01 : Créez un module pour placer spécifiquement des instructions personnalisées

ng g d directive/test/directive-test02 --spec=false --module=directive

   4.1.2 Injection de dépendances ElementRef  dans la classe du contrôleur

constructor(
 private el: ElementRef
 ) {}

     4.1.3 Changer la couleur d'arrière-plan de l'objet DOM correspondant à l'élément marqué avec une instruction personnalisée via une instance ElementRef 

 ngOnInit() {
  this.el.nativeElement.style.backgroundColor = 'skyblue';
 }

     4.1.3 Spécifier les exportations       

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

dans le module de commande personnalisé      4.1.4 Importez le module d'instructions personnalisées dans le module où se trouve le composant qui doit utiliser l'instruction spécifiée

Astuce 01 : Les instructions personnalisées sont généralement utilisées plusieurs fois, de sorte que le module d'instructions personnalisées est généralement importé dans le module partagé et exporté depuis le module partagé, de sorte que les autres modules n'ont besoin que d'importer le module partagé

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 Utilisez simplement le sélecteur correspondant au composant personnalisé dans le composant

Le sélecteur d'une directive personnalisée est spécifié par les métadonnées du sélecteur du décorateur @Directive

 Il suffit de marquer le sélecteur de la directive personnalisée directement dans l'élément    

<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 Résumé du code

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 Lier les attributs d'entrée aux instructions d'attribut personnalisées

Dans les instructions d'attribut personnalisé implémentées dans 4.1, la couleur d'arrière-plan est codée en dur et ne peut pas être modifiée. Nous pouvons lier les attributs d'entrée aux instructions pour réaliser le transfert de données, afin d'atteindre l'objectif de changement dynamique

.      4.2.1 Ajouter un attribut d'entrée 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;
 }
}

dans le contrôleur de la directive d'attribut personnalisé      4.2.2 Attribuer une valeur à la propriété myColor dans le composant

      技巧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中文网其它相关文章！

推荐阅读：

实现react服务器渲染的步奏详解

JS里EventLoop的使用详解

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!