我们可以遍历 Angular 中所有用 @Output() 装饰的 EventEmitter 2

Question

我想要实现的是对于给定的组件实例，我想遍历所有用 @Output 装饰的 EventEmitter。

例如

我的组件

   @Component({
     moduleId: module.id,
     selector: "my-component",
     template: "<h1>My Component!!"
   })
   export class MyComponent{ 
     @Output() emitter1: EventEmitter<any> = new EventEmitter<any>();
     @Output() emitter2: EventEmitter<any> = new EventEmitter<any>();
   }

所以假设我正在动态加载这个组件，如下所示，

   this._cr.resolveComponent(MyComponent).then(cmpFactory => {
        this.testComponentContainer.clear();
        let instance: any = this.testComponentContainer.createComponent(cmpFactory).instance;

        // Here I want to iterate over EventEmitter dynamically
        // So that I may bind to both emitter1 and emitter2
    });

我可以这样做吗？提前致谢！！

Answer 1

您可以查看 propMetadata 元数据以找出经过修饰的输出。

这是一个示例：

this._cr.resolveComponent(MyComponent).then(cmpFactory => {
    this.testComponentContainer.clear();
    let instance: any = this.testComponentContainer.createComponent(cmpFactory).instance;

    var propMetadata = Reflect.getMetadata('propMetadata', MyComponent);
    var outputs = propMetadata.filter(metadata => {
      return (metadata instanceof OutputMetadata);
    });

    outputs.forEach(output => {
      output.subscribe(event => {
        // handle event
      });
    });

    // Here I want to iterate over EventEmitter dynamically
    // So that I may bind to both emitter1 and emitter2
});

Madhu Ranjan 更新 上面的代码有问题，但是它提示我像下面这样正确地使用它，

   this._cr.resolveComponent(componentToTest).then(cmpFactory => {
        this.testComponentContainer.clear();
        let instance: any =   this.testComponentContainer.createComponent(cmpFactory).instance;

        let propMetadata: any = Reflect.getMetadata('propMetadata', componentToTest);
        let outputs: any = [];

        for (let key in propMetadata) {
            if (propMetadata.hasOwnProperty(key)) {
                if (propMetadata[key].length > 0) {
                    let _hasOutput = propMetadata[key].filter(metadata => {
                        return (metadata instanceof OutputMetadata);
                    });

                    if (_hasOutput && _hasOutput.length > 0) {
                        outputs.push(key);
                    }
                }
            }
        }

        outputs.forEach(output => {
            instance[output].subscribe(event => {
                // Logic to use event data..
            });
        });
    });

我们可以遍历 Angular 中所有用 @Output() 装饰的 EventEmitter 2

Can we iterate over all EventEmitter decorated with @Output() in Angular 2

angular

typescript1.8

reflect-metadata