這篇“Angular中如何使用方法裝飾器”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Angular中如何使用方法裝飾器”文章吧。
讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：申請域名、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設(shè)、蓮花網(wǎng)站維護、網(wǎng)站推廣。
在es6中，裝飾器（Decorator）是一種與類（class）相關(guān)的語法，用來注釋或修改類和類方法；裝飾器其實就是一個編譯時執(zhí)行的函數(shù)，語法“@函數(shù)名”，通常放在類和類方法的定義前面。裝飾器有兩種：類裝飾器和類方法裝飾器。
在 Angular 中，最常見的裝飾器有 @Component 類裝飾器，并且我們還能夠為方法添加裝飾器：
裝飾器是一個函數(shù)，方法裝飾器可以用來監(jiān)視、修改或者替換方法的定義
在上面的作用中提到了，方法裝飾器能夠用來監(jiān)視，修改，或者替換方法的定義，這樣我們能夠靈活運用它帶給我們的這一層封裝來做很多事情。
最常見的就是校驗，我們能夠通過這一層封裝一個方法，來進行統(tǒng)一的權(quán)限校驗，這樣在哪個方法上面需要添加權(quán)限校驗的話，就只需要加上這個方法裝飾器，而不需要重復(fù)去重寫校驗方法。
再或者就是統(tǒng)一的彈窗或者提示處理，對于很多不同的方法可能在執(zhí)行結(jié)束之后都要進行統(tǒng)一的提示處理，這樣就可以統(tǒng)一添加一個方法裝飾器來進行統(tǒng)一處理。
總而言之，方法裝飾器也就是為了封裝部分方法上的統(tǒng)一邏輯，方便再每個方法調(diào)用的過程中需要的時候去進行復(fù)用。
方法裝飾器主要有三個入?yún)?/p>
target: Object - 被裝飾的類的對象
key：string - 方法名
descriptor: TypePropertyDescript - 屬性描述符
重慶分公司
重慶分公司
import { Component, OnInit } from '@angular/core';
function log(target: any, key: string, descriptor: any) {
console.log(target);
console.log(key);
console.log(descriptor);
}
@Component({
selector: 'app-fn-test',
templateUrl: './fn-test.component.html',
styleUrls: ['./fn-test.component.scss']
})
export class FnTestComponent implements OnInit {
constructor() { }
ngOnInit(): void {
this.pay(2,3)
}
@log
pay(Price: number, count:number): number {
return Price*count
}
}
并且方法裝飾可以細分為兩種，一種是傳入?yún)?shù)的方法裝飾器，另一種是不傳入?yún)?shù)的。
屬性描述符中有一個屬性 descriptor.value 就是被裝飾的方法，通過這個方法，我們就能夠拿到傳入的參數(shù)以及函數(shù)的執(zhí)行結(jié)果：
function log(target: any, key: string, descriptor: any) {
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}`);
return result;
}
}在傳入?yún)?shù)的這種情況下，我們需要在之前的函數(shù)外面再包裝一層，外層函數(shù)能夠拿到傳入的值，內(nèi)層返回的函數(shù)就是和之前的不帶參數(shù)的函數(shù)時想用的，能夠拿到三個參數(shù)：
function log(nowTime: Date) {
console.log(nowTime);
return function(target: any, key: string, descriptor: any){
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}`);
return result;
}
}
}
export class FnTestComponent implements OnInit {
...
@log(new Date())
pay(Price: number, count:number): number { return Price*count
}
}
// Tue Jun 07 2022 18:48:22 GMT+0800 (中國標準時間)
// fn-test.component.ts:9 method：pay, args：[2,3], return：6以上就是關(guān)于“Angular中如何使用方法裝飾器”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
