Angular 2：从字符串名称调用函数

Question

我不确定 Typescript 本身是否与 Angular 2 或更多相关的问题。但无论如何，我有一个组件会发出对象

<grid" (gridButtonClickEvent)="gridEvent($event)"></grid>

这是我捕捉事件的方式

private gridEvent(event) {
    console.log(event);
}

这是我得到的事件格式。

{Key: value}

所以基本上它是一个简单的对象。 我想调用一个名为Key 的函数并将value 作为参数传递，这怎么可能？对象Key 会有所不同，但我知道所有可能的变体并且已经在我的组件中注册了函数。

private Key() {}

我正在尝试这样的事情

private gridEvent(event) {
    let eventName = Object.keys(event)[0];
    window[eventName]();
}

但它说

window[eventName] is not a function

Answer 1

试试这个：

private gridEvent(event) {
    let methodName = Object.keys(event)[0];
    if(this[methodName]) {
        // method exists in the component
        let param = event[methodName];
        this[methodName](param); // call it
    }
}

更直观的方法是将您的发射对象构造为：

{ methodName: 'method1', methodParam: someValue } 

然后在组件中：

private gridEvent(event) {
    let methodName = event.methodName;
    if(this[methodName]) {
        // method exists on the component
        let param = event.methodParam;
        this[methodName](param); // call it
    }
}

但是，如果不是真的必要，我个人会避免这样做。而是发出一个应该触发的动作，然后执行一些 switch 语句来调用适当的方法。一种更愚蠢的方法，但我会说更容易推理。