Apa itu penghias? Mari kita bincangkan tentang cara menggunakan penghias kaedah dalam Angular?

Apakah itu penghias? Artikel ini akan memperkenalkan kepada anda cara menggunakan penghias kaedah dalam Angular saya harap ia akan membantu anda!

Penghias kaedah bukan ciri eksklusif Angular Ia juga mempunyai ciri ini dalam es6 Artikel ini memperkenalkan penggunaan penghias kaedah dalam Angular. [Tutorial berkaitan yang disyorkan: "tutorial sudut"]

Apakah itu penghias

Dalam es6, penghias (Penghias) Ia adalah sintaks yang berkaitan dengan kelas, digunakan untuk menganotasi atau mengubah suai kelas dan kaedah kelas; Terdapat dua jenis penghias: penghias kelas dan penghias kaedah kelas.

Dalam Angular, penghias yang paling biasa ialah penghias kelas @Component, dan kami juga boleh menambah penghias untuk kaedah:

Penghias ialah fungsi. Penghias kaedah boleh digunakan untuk memantau, mengubah suai atau menggantikan definisi kaedah

Kelebihan menggunakan penghias kaedah

Sebagai disebut dalam fungsi di atas, penghias kaedah boleh digunakan untuk memantau, mengubah suai, atau menggantikan definisi kaedah, supaya kita boleh menggunakan lapisan pengkapsulan secara fleksibel yang membawa kita melakukan banyak perkara.

Yang paling biasa ialah pengesahan Kami boleh merangkum kaedah melalui lapisan ini untuk melaksanakan pengesahan kebenaran bersatu Dengan cara ini, jika anda perlu menambah pengesahan kebenaran pada mana-mana kaedah, anda hanya perlu menambah kaedah ini. Penghias, tanpa perlu berulang kali mengatasi kaedah pengesahan.

Atau terdapat tetingkap timbul bersatu atau pemprosesan segera Untuk banyak kaedah yang berbeza, pemprosesan segera bersatu boleh dilakukan selepas pelaksanaan, supaya penghias kaedah boleh ditambah untuk pemprosesan bersatu.

Ringkasnya, penghias kaedah adalah untuk merangkum logik bersatu beberapa kaedah, supaya ia boleh digunakan semula apabila diperlukan dalam proses memanggil setiap kaedah.

Penggunaan penghias kaedah

Penghias kaedah terutamanya mempunyai tiga parameter input

• sasaran: Objek - objek kelas yang dihias
• kunci: rentetan - nama kaedah
• deskriptor: TypePropertyDescript - deskriptor sifat

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

dan hiasan kaedah boleh Ia adalah dibahagikan kepada dua jenis, satu ialah penghias kaedah yang lulus dalam parameter, dan satu lagi ialah penghias kaedah yang tidak lulus dalam parameter.

Tiada parameter diluluskan dalam

Terdapat deskriptor.nilai atribut dalam deskriptor atribut, iaitu kaedah yang dihias, kita boleh mendapatkan yang masuk Parameter dan keputusan pelaksanaan fungsi:

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

Parameter masuk

Dalam kes parameter masuk ini, kita perlu membungkusnya di luar fungsi sebelumnya Dalam satu lapisan, fungsi lapisan luar boleh mendapatkan nilai lulus Fungsi yang dikembalikan oleh lapisan dalam adalah sama seperti fungsi sebelumnya tanpa parameter Ia boleh mendapatkan tiga parameter:

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

Ringkasan<.>

Video Pengaturcaraan! !

Atas ialah kandungan terperinci Apa itu penghias? Mari kita bincangkan tentang cara menggunakan penghias kaedah dalam Angular?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!