Methodendekoratoren sind keine exklusive Funktion von Angular. Diese Funktion ist auch in es6 verfügbar. In diesem Artikel wird hauptsächlich die Verwendung von Methodendekoratoren in Angular vorgestellt. [Verwandte Tutorial-Empfehlung: „Angular-Tutorial“]
In es6 ist Dekorator eine Syntax, die sich auf eine Klasse (Klasse) bezieht und zum Kommentieren oder Ändern von Klassen und Klassenmethoden verwendet wird Bei der Kompilierung wird in der Regel die Syntax „@Funktionsname“ vor die Definition von Klassen und Klassenmethoden gestellt. Es gibt zwei Arten von Dekoratoren: Klassendekoratoren und Klassenmethodendekoratoren.
In Angular ist der @Component-Klassendekorator der gebräuchlichste Dekorator, und wir können den Methoden auch Dekoratoren hinzufügen:
Ein Dekorator ist eine Funktion, mit der die Definition einer Methode überwacht, geändert oder ersetzt
kann Definition einer Methode Auf diese Weise können wir diese Kapselungsebene flexibel nutzen, um viele Dinge zu tun.
Die häufigste Methode ist die Überprüfung. Wir können eine Methode über diese Ebene kapseln, um eine einheitliche Berechtigungsüberprüfung durchzuführen. Wenn Sie einer Methode eine Berechtigungsüberprüfung hinzufügen müssen, müssen Sie zum Überschreiben nur diesen Methodendekorator hinzufügen Verifizierungsmethode.
Oder es kann sich um ein einheitliches Popup-Fenster oder eine Eingabeaufforderungsverarbeitung handeln. Bei vielen verschiedenen Methoden kann nach der Ausführung eine einheitliche Eingabeaufforderungsverarbeitung durchgeführt werden, sodass ein Methodendekorator für eine einheitliche Verarbeitung hinzugefügt werden kann.
Alles in allem besteht der Zweck von Methodendekoratoren darin, die einheitliche Logik einiger Methoden zu kapseln, damit sie bei Bedarf bei jedem Methodenaufruf wiederverwendet werden können.
Der Dekorator verfügt hauptsächlich über drei Eingabeparameter
import { Component, OnInit } from '@angular/core';
Funktionsprotokoll (Ziel: beliebig, Schlüssel: Zeichenfolge, Deskriptor: beliebig) {
console.log(Ziel);
console.log(key);
console.log(deskriptor);
}
@Komponente({
Selektor: 'app-fn-test',
templateUrl: './fn-test.component.html',
styleUrls: ['./fn-test.component.scss']
})
Die Exportklasse FnTestComponent implementiert OnInit {
Konstruktor() { }
ngOnInit(): void {
this.pay(2,3)
}
@Protokoll
pay(Price: number, count:number): number {
Rückgabepreis*Anzahl
}
} 
Die Methodendekoration kann in zwei Typen unterteilt werden: Der eine ist der Methodendekorator, der Parameter übergibt, und der andere ist der Methodendekorator, der keine Parameter übergibt.
Im Eigenschaftsdeskriptor gibt es ein Attribut descriptor.value, bei dem es sich um die dekorierte Methode. Mit dieser Methode können wir die übergebenen Parameter und das Ausführungsergebnis der Funktion abrufen:
function log(target: any, key:). Zeichenfolge, Deskriptor: beliebig) {
let method = descriptor.value;
descriptor.value = function (...args: any[]) {
var result: any = method.apply(this, args);
console.log(`method：${key}, args：${JSON.stringify(args)}, return：${result}`);
Ergebnis zurückgeben;
}
} In diesem Fall der Übergabe von Parametern müssen wir eine weitere Ebene außerhalb der vorherigen Funktion einschließen. Die äußere Funktion kann den übergebenen Wert erhalten, und die von der inneren Ebene zurückgegebene Funktion ist dieselbe wie die vorherige ohne Parameter. Wenn Sie die Funktion verwenden möchten, können Sie drei Parameter abrufen:
function log(nowTime: Date) {
console.log(nowTime);
Rückgabefunktion (Ziel: beliebig, Schlüssel: Zeichenfolge, Deskriptor: beliebig){
let method = descriptor.value;
descriptor.value = function (...args: any[]) {
var result: any = method.apply(this, args);
console.log(`method：${key}, args：${JSON.stringify(args)}, return：${result}`);
Ergebnis zurückgeben;
}
}
}
Die Exportklasse FnTestComponent implementiert OnInit {
...
@log(neues Datum())
pay(Price: number, count:number): number { return Price*count
}
}
// Dienstag, 7. Juni 2022, 18:48:22 Uhr GMT+0800 (China Standard Time)
// fn-test.component.ts:9 method: pay, args: [2,3], return: 6 Durch Methodendekoratoren können wir eine einheitliche logische Verarbeitung für Methoden innerhalb der Klasse durchführen, wodurch viel Unnötiges reduziert werden kann Die Vervielfältigung von Code kann die Methode auch vereinfachen und die Kosten für die anschließende Sekundärentwicklung erheblich senken.