Angular 2: функция вызова из имени строки

Я не уверен, что это вопрос, связанный с 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

typescript angular function eventemitter
person Lunin Roman    schedule 08.02.2017    source источник
comment
1. У вас есть это событие как свойство на вашем window? 2. Почему вы делаете такие вещи? Не проще ли просто передать функцию как свойство объекта?   -  person smnbbrv    schedule 08.02.2017

Ответы (1)


arrow_upward
41
arrow_downward

Попробуй это:

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, чтобы вызвать соответствующий метод. Тупой подход, но проще рассуждать, я бы сказал.

person seidme    schedule 08.02.2017
comment
Действительно полезное и простое решение. Работает как шарм в Angular 6. Спасибо! - person moreirapontocom; 31.10.2019