Question

在使用Angular组件时，有时需要添加很多事件发射器（即@Output）变量。

@Component({
    selector: 'my-selector',
    template: '<div>[SOMECODE]</div>',
    providers: [MyService],
})

export class MyComponent {
  @Input input1:any;
  @Output output1 = new EventEmitter<MyEventObject>();
}

问题是列表中有很多变量，例如output1（大约200个事件），如何动态地将这些变量作为@Output变量添加到组件中？

Answer 1

您可以只使用type来区分不同类型的事件

用一个包含类型键的对象和另一个将包含实际数据的对象来定义output1

@Output output1 = new EventEmitter<{ type: string, object: MyEventObject }>();

...

this.output1.emit({
    type: 'type-1',
    object: {
        someKey: 'test'
    }
})

在收听时，您可以使用开关盒或在以下情况下使用：

this.output1.subscribe(data => {
    switch(data.type) {
        case 'type-1':
            // Do something
            break;
        case 'type-2':
            // Do something
            break;
    }
})

听起来有很多200个事件，但是如果您仍然想继续前进，可以这样做

在Angular组件中动态添加@Output？

1 个答案: