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

Question

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

<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 语句来调用适当的方法。一种更笨的方法，但我会说更容易推理。

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

Angular 2: Call function from a string name

function

angular

typescript

eventemitter