什么是裝飾器？本篇文章給大家介紹一下Angular中使用方法裝飾器的方法，希望對大家有所幫助！

方法裝飾器并不是 Angular 的專屬特性，在 es6 中也有著這種特性，本文主要是介紹 方法裝飾器 在 Angular 中的使用?！鞠嚓P(guān)教程推薦：《angular教程》】

什么是裝飾器

在es6中，裝飾器（Decorator）是一種與類（class）相關(guān)的語法，用來注釋或修改類和類方法；裝飾器其實(shí)就是一個(gè)編譯時(shí)執(zhí)行的函數(shù)，語法“@函數(shù)名”，通常放在類和類方法的定義前面。裝飾器有兩種：類裝飾器和類方法裝飾器。

在 Angular 中，最常見的裝飾器有 @Component 類裝飾器，并且我們還能夠?yàn)榉椒ㄌ砑友b飾器：

裝飾器是一個(gè)函數(shù)，方法裝飾器可以用來監(jiān)視、修改或者替換方法的定義

使用方法裝飾器的優(yōu)點(diǎn)

在上面的作用中提到了，方法裝飾器能夠用來監(jiān)視，修改，或者替換方法的定義，這樣我們能夠靈活運(yùn)用它帶給我們的這一層封裝來做很多事情。

最常見的就是校驗(yàn)，我們能夠通過這一層封裝一個(gè)方法，來進(jìn)行統(tǒng)一的權(quán)限校驗(yàn)，這樣在哪個(gè)方法上面需要添加權(quán)限校驗(yàn)的話，就只需要加上這個(gè)方法裝飾器，而不需要重復(fù)去重寫校驗(yàn)方法。

再或者就是統(tǒng)一的彈窗或者提示處理，對于很多不同的方法可能在執(zhí)行結(jié)束之后都要進(jìn)行統(tǒng)一的提示處理，這樣就可以統(tǒng)一添加一個(gè)方法裝飾器來進(jìn)行統(tǒng)一處理。

總而言之，方法裝飾器也就是為了封裝部分方法上的統(tǒng)一邏輯，方便再每個(gè)方法調(diào)用的過程中需要的時(shí)候去進(jìn)行復(fù)用。

方法裝飾器的使用

方法裝飾器主要有三個(gè)入?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   } }

并且方法裝飾可以細(xì)分為兩種，一種是傳入?yún)?shù)的方法裝飾器，另一種是不傳入?yún)?shù)的。

不傳入?yún)?shù)

屬性描述符中有一個(gè)屬性 descriptor.value 就是被裝飾的方法，通過這個(gè)方法，我們就能夠拿到傳入的參數(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ù)

在傳入?yún)?shù)的這種情況下，我們需要在之前的函數(shù)外面再包裝一層，外層函數(shù)能夠拿到傳入的值，內(nèi)層返回的函數(shù)就是和之前的不帶參數(shù)的函數(shù)時(shí)想用的，能夠拿到三個(gè)參數(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 (中國標(biāo)準(zhǔn)時(shí)間) // fn-test.component.ts:9 method：pay, args：[2,3], return：6

總結(jié)

通過方法裝飾器，我們就能夠?qū)︻悆?nèi)部的方法進(jìn)行統(tǒng)一的邏輯處理，這樣能夠減少大量不必要的重復(fù)代碼，也能夠使得方法更加的簡單，大大的減少之后二次開發(fā)的成本。