面试题：Angular事件绑定中如何实现自定义事件并传递复杂数据结构

Question

在Angular中，创建一个自定义指令，该指令需要绑定一个自定义事件。当事件触发时，要传递一个复杂的数据结构，例如一个包含多个对象的数组[{id: 1, value: 'A'}, {id: 2, value: 'B'}]。请详细说明实现步骤并给出核心代码。

Answer 1

1. 创建自定义指令：
   • 使用Angular CLI创建指令，命令为ng generate directive your - directive - name。
   • 指令类代码如下：

   import { Directive, EventEmitter, Output } from '@angular/core';
   
   @Directive({
     selector: '[appYourDirective]'
   })
   export class YourDirective {
     @Output() customEvent = new EventEmitter<{ id: number; value: string }[]>();
   
     constructor() {}
   
     // 假设这里有一个触发事件的方法，例如在某个条件满足时触发
     triggerCustomEvent() {
       const complexData: { id: number; value: string }[] = [
         { id: 1, value: 'A' },
         { id: 2, value: 'B' }
       ];
       this.customEvent.emit(complexData);
     }
   }
   

2. 在模板中使用指令并绑定事件：
   • 在组件的模板中使用自定义指令并绑定事件：

   <div appYourDirective (customEvent)="handleCustomEvent($event)">
     <!-- 这里div内容根据实际需求填写 -->
   </div>
   

3. 在组件类中处理事件：
   • 在组件类中定义handleCustomEvent方法来处理事件：

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app - your - component',
     templateUrl: './your - component.html',
     styleUrls: ['./your - component.css']
   })
   export class YourComponent {
     handleCustomEvent(data: { id: number; value: string }[]) {
       console.log('Received data:', data);
       // 在这里处理接收到的复杂数据结构
     }
   }
   

上述代码实现了在Angular中创建一个自定义指令并绑定自定义事件，当事件触发时传递复杂数据结构的功能。