Ausführliche Erläuterung der Verwendung benutzerdefinierter Anweisungen in Angular17-js-Tutorial-php.cn

Dieses Mal werde ich Ihnen die Verwendung benutzerdefinierter Anweisungen in Angular17 ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung benutzerdefinierter Anweisungen in Angular17? .

1 Was ist HTML

HTML-Dokument ist eine reine Textdatei, die HTML-Elemente, CSS-Stile und JavaScript-Codes enthält; HTML-Elemente werden durch Tags gerendert und der Browser erstellt jedes Tag ein DOM-Objekt mit Attributen. Der Browser rendert den Inhalt, indem er diese DOM-Knoten rendert. Der Inhalt, den der Benutzer im Browser sieht, ist das Ergebnis des Browser-Renderings des DOM-Objekts.

2 Klassifizierung von Anweisungen

Komponenten, Attributanweisungen, Strukturanweisungen

Spezifische Wissenspunkte finden Sie unter „Angular2 Revealed“

3 bezieht sich auf einige Konstanten, die häufig beim Definieren von Anweisungen verwendet werden

3.1 Richtlinie

Wird zum Dekorieren der Controller-Klasse verwendet, um anzuzeigen, dass es sich bei der Controller-Klasse um eine benutzerdefinierte Befehls-Controller-Klasse handelt

3.2 ElementRef

Als Referenz auf ein DOM-Objekt wird die Abhängigkeitsinjektion über den Konstruktor durchgeführt. Seine Instanz stellt das DOM-Objekt des mit einer benutzerdefinierten Anweisung markierten Elements dar. Jedes mit einer benutzerdefinierten Anweisung markierte Element verfügt automatisch über eine ElementRef Objekt. als Referenz auf das DOM-Objekt des Elements (Voraussetzung: ElementRef wird abhängig im Controller der benutzerdefinierten Anweisung eingefügt)

3.3 Render2

Instanzen von Render2 werden zum Betreiben von DOM-Knoten verwendet, da Angular nicht empfiehlt, DOM-Knoten direkt zu betreiben; Render2 wird nur von Angular4 unterstützt und frühere Versionen, die Render verwenden, verfügen über eine Render2-Instanz, um die DOM-Attribute zu betreiben des Elements (Voraussetzung: Render2 ist eine im Controller der benutzerdefinierten Direktive injizierte Abhängigkeit)

3.4 HostListener

Anmerkungen zur Dekoration ereignisauslösender Methoden

4 Anweisungen für benutzerdefinierte Attribute

Eine benutzerdefinierte Attributdirektive erfordert eine Controller-Klasse, die mit dem @Directive-Dekorator

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

Nach dem Login kopieren

dekoriert ist 4.1 Implementieren Sie benutzerdefinierte Attributanweisungen

4.1.1 Erstellen Sie eine benutzerdefinierte Attributanweisungskontrollklasse

Tipp 01: Erstellen Sie ein Modul, um gezielt benutzerdefinierte Anweisungen zu platzieren

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

Nach dem Login kopieren

4.1.2 Abhängigkeitsinjektion ElementRef in der Controller-Klasse

constructor(
 private el: ElementRef
 ) {}

Nach dem Login kopieren

4.1.3 Ändern Sie die Hintergrundfarbe des DOM-Objekts, das dem Element entspricht, das mit einer benutzerdefinierten Anweisung über eine ElementRef-Instanz markiert ist

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

Nach dem Login kopieren

4.1.3 Exporte angeben

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

Nach dem Login kopieren

im benutzerdefinierten Befehlsmodul 4.1.4 Importieren Sie das benutzerdefinierte Anweisungsmodul in das Modul, in dem sich die Komponente befindet, die die angegebene Anweisung verwenden muss

Tipp 01: Benutzerdefinierte Anweisungen werden im Allgemeinen mehrfach verwendet, daher wird das benutzerdefinierte Anweisungsmodul im Allgemeinen in das gemeinsam genutzte Modul importiert und aus dem gemeinsam genutzten Modul exportiert, sodass andere Module nur das gemeinsam genutzte Modul importieren müssen

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

Nach dem Login kopieren

4.1.5 Verwenden Sie einfach den Selektor, der der benutzerdefinierten Komponente in der Komponente

entspricht Der Selektor einer benutzerdefinierten Direktive wird durch die Selektor-Metadaten des @Directive-Dekorators

angegeben Markieren Sie einfach den Selektor der benutzerdefinierten Direktive direkt im Element

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

Nach dem Login kopieren

4.1.6 Codezusammenfassung

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

Nach dem Login kopieren

4.2 Eingabeattribute an benutzerdefinierte Attributanweisungen binden

In den in 4.1 implementierten benutzerdefinierten Attributanweisungen ist die Hintergrundfarbe fest codiert und kann nicht geändert werden, um eine Datenübertragung zu erreichen und so den Zweck der dynamischen Änderung zu erreichen

4.2.1 Fügen Sie ein Eingabeattribut 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;
 }
}

Nach dem Login kopieren

im Controller der benutzerdefinierten Attributdirektive hinzu 4.2.2 Weisen Sie der myColor-Eigenschaft in der Komponente

einen Wert zu

技巧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) {	
		  }

Nach dem Login kopieren

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

Nach dem Login kopieren

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