ตัวตกแต่งเมธอดไม่ใช่คุณสมบัติพิเศษของ Angular คุณสมบัตินี้มีอยู่ใน es6 เช่นกัน [คำแนะนำการสอนที่เกี่ยวข้อง: "บทช่วยสอนเชิงมุม"]
ใน es6 มัณฑนากร (มัณฑนากร) เป็นไวยากรณ์ที่เกี่ยวข้องกับคลาส (คลาส) ที่ใช้ในการใส่คำอธิบายประกอบหรือแก้ไขคลาสและวิธีการเรียน ในระหว่างการคอมไพล์ ไวยากรณ์ "@function name" มักจะอยู่หน้าคำจำกัดความของคลาสและเมธอดคลาส ตัวตกแต่งมีสองประเภท: ตัวตกแต่งคลาส และตัวตกแต่งเมธอดคลาส
ใน Angular มัณฑนากรที่พบมากที่สุดคือมัณฑนากรคลาส @Component และเรายังสามารถเพิ่มมัณฑนากรให้กับเมธอดได้:
มัณฑนากรเป็นฟังก์ชัน มัณฑนากรวิธีการสามารถใช้เพื่อตรวจสอบ แก้ไข หรือแทนที่คำจำกัดความของ
ได้กล่าวไว้ข้างต้น คำจำกัดความของวิธีการ ด้วยวิธีนี้ เราสามารถใช้การห่อหุ้มชั้นนี้ได้อย่างยืดหยุ่นซึ่งนำเราไปสู่การทำสิ่งต่างๆ มากมาย
วิธีที่พบบ่อยที่สุดคือการตรวจสอบ เราสามารถสรุปวิธีการผ่านเลเยอร์นี้เพื่อทำการตรวจสอบสิทธิ์แบบรวม ด้วยวิธีนี้ หากคุณต้องการเพิ่มการตรวจสอบสิทธิ์ให้กับวิธีการ คุณจะต้องเพิ่มตัวตกแต่งวิธีการนี้แทนการทำซ้ำเพื่อแทนที่ วิธีการตรวจสอบ
หรืออาจเป็นหน้าต่างป๊อปอัปแบบรวมหรือการประมวลผลพร้อมท์ สำหรับวิธีการต่างๆ มากมาย การประมวลผลพร้อมท์แบบรวมอาจดำเนินการหลังจากดำเนินการ เพื่อให้สามารถเพิ่มตัวตกแต่งวิธีการสำหรับการประมวลผลแบบครบวงจรได้
โดยรวมแล้ว จุดประสงค์ของเครื่องมือตกแต่งเมธอดคือการห่อหุ้มตรรกะแบบรวมของวิธีการบางอย่าง เพื่อให้สามารถนำมาใช้ซ้ำได้เมื่อจำเป็นในระหว่างการเรียกใช้เมธอดแต่ละครั้ง
วิธีการ มัณฑนากรส่วนใหญ่มีพารามิเตอร์อินพุตสาม
นำเข้า { ส่วนประกอบ, OnInit } จาก '@ เชิงมุม/core';
บันทึกฟังก์ชัน (เป้าหมาย: ใด ๆ คีย์: สตริง descriptor: ใด ๆ ) {
console.log(เป้าหมาย);
console.log(คีย์);
console.log(คำอธิบาย);
-
@ส่วนประกอบ({
ตัวเลือก: 'app-fn-test',
templateUrl: './fn-test.component.html',
styleUrls: ['./fn-test.component.scss']
-
คลาสส่งออก FnTestComponent ใช้ OnInit {
ตัวสร้าง () { }
ngOnInit(): เป็นโมฆะ {
นี่.จ่าย(2,3)
-
@บันทึก
จ่าย(ราคา: หมายเลข, นับ: หมายเลข): หมายเลข {
ราคาไปกลับ*จำนวน
-
- 
และการตกแต่งวิธีการสามารถแบ่งย่อยได้เป็นสองประเภท ประเภทแรกคือตัวตกแต่งวิธีการที่ส่งผ่านพารามิเตอร์ และอีกประเภทหนึ่งคือตัวตกแต่งวิธีการที่ไม่ผ่านพารามิเตอร์
มีแอตทริบิวต์ descriptor.value ในตัวอธิบายคุณสมบัติซึ่งเป็นวิธีการตกแต่ง โดยวิธีนี้ เราสามารถรับค่าที่ส่งผ่านในพารามิเตอร์และผลลัพธ์การดำเนินการของฟังก์ชัน:
function log(target: any, key: สตริง, คำอธิบาย: ใด ๆ) {
ให้วิธี = descriptor.value;
descriptor.value = ฟังก์ชั่น (...args: ใด ๆ []) {
ผลลัพธ์ var: any = method.apply(this, args);
console.log(`method：${key}, args：${JSON.stringify(args)}, return：${result}`);
ส่งคืนผลลัพธ์;
-
} ในกรณีนี้ของการส่งผ่านพารามิเตอร์ เราจำเป็นต้องตัดเลเยอร์อื่นออกไปนอกฟังก์ชันก่อนหน้า ฟังก์ชันภายนอกสามารถรับค่าที่ส่งผ่าน และฟังก์ชันที่ส่งคืนโดยเลเยอร์ด้านในจะเหมือนกับฟังก์ชันก่อนหน้าโดยไม่มีพารามิเตอร์ หากคุณต้องการใช้ฟังก์ชัน คุณสามารถรับพารามิเตอร์ได้ 3 ตัว:
บันทึกฟังก์ชัน (ตอนนี้เวลา: วันที่) {
console.log(ตอนนี้เวลา);
ฟังก์ชั่น return (เป้าหมาย: ใด ๆ , คีย์: สตริง, descriptor: ใด ๆ ) {
ให้วิธี = descriptor.value;
descriptor.value = ฟังก์ชั่น (...args: ใด ๆ []) {
ผลลัพธ์ var: any = method.apply(this, args);
console.log(`method：${key}, args：${JSON.stringify(args)}, return：${result}`);
ส่งคืนผลลัพธ์;
-
-
-
คลาสส่งออก FnTestComponent ใช้ OnInit {
-
@log(วันที่ใหม่())
pay(ราคา: number, count:number): number { return Price*count
-
-
// วันอังคารที่ 07 มิ.ย. 2565 18:48:22 GMT+0800 (เวลามาตรฐานประเทศจีน)
// fn-test.component.ts:9 method: pay, args: [2,3], return: 6 ด้วยเครื่องมือตกแต่งเมธอด เราสามารถดำเนินการประมวลผลเชิงตรรกะแบบรวมศูนย์กับเมธอดภายในคลาสได้ ซึ่งสามารถลดสิ่งที่ไม่จำเป็นได้มาก การทำซ้ำโค้ดยังทำให้วิธีการง่ายขึ้นและลดต้นทุนในการพัฒนาขั้นที่สองในภายหลังได้อย่างมาก