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中文网其它相关文章！
推荐阅读：
实现react服务器渲染的步奏详解
JS里EventLoop的使用详解
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung benutzerdefinierter Anweisungen in Angular17. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
