Получить и выполнить функцию из пары ключ: значение Объект в Angular 9

Question

У меня есть простой компонент, все, что он делает, это отображает список ресурсов. Эти ресурсы извлекаются из службы, которую я вызываю внутри этого самого компонента. Когда вызывается эта служба, я передаю сообщение, чтобы другие компоненты знали, что ресурс был добавлен в базу данных. Я пытаюсь выполнить определенную функцию, когда конкретное сообщение транслируется.

// service/service-list/service-list.component.ts
import { Component, OnInit } from '@angular/core';
import { Service } from '../service.model'
import { HttpClient } from '@angular/common/http';
import { ServiceApi } from '../service.api';
import { MessagingService } from 'src/app/messaging.service';
import { ServiceFunctionMaps } from '../service.function.maps.model';
import { ServiceFunction } from '../service.function.model';

@Component({
  selector: 'app-service-list',
  templateUrl: './service-list.component.html',
  styleUrls: ['./service-list.component.css']
})
export class ServiceListComponent implements OnInit {

  allServices: Service[]
  functionMaps: ServiceFunctionMaps = {
    // serviceAdded: this.getAllServices
    serviceAdded: <ServiceFunction>this.getAllServices
  }

  constructor(private http: HttpClient, private api: ServiceApi, private msgService: MessagingService) {
    this.msgService.readMessage().subscribe(msg => {
      this.functionMaps[msg]()
      // The if statement works just fine
      // if (msg === 'serviceAdded') {
      //   this.getAllServices()
      // }
    })
    this.msgService.cleareMessage()
  }

  ngOnInit(): void {
    this.getAllServices()
  }

  private getAllServices() {
    this.api.fetchAllServices().subscribe(responseData => {
      this.allServices = responseData
    })
  }
}

// service/service-function.ts
export interface ServiceFunction {
  (params?: string): void
  // (params?: string): Function
  // (params?: string): () => void
}

// service/service-function-maps.model.ts
import { ServiceFunction } from './service-function.model';

export interface ServiceFunctionMaps {
  [key: string]: ServiceFunction
}

Как вы можете видеть, я хочу динамически выполнять функцию на основе передаваемого сообщения. Прямо сейчас код компилируется, но я получаю сообщение об ошибке в консоли, например ...

core.js:6189 ERROR TypeError: this.functionMaps[msg] is not a function

// tsconfig.json
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "lib": [
      "es2018",
      "dom"
    ],
    "resolveJsonModule": true
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

Как я могу создать объект функций, которые будут выполняться динамически?

Answer 1

ОБНОВЛЕНИЕ

Два изменения устранили проблему:

1. bind(this)

  // I don't need the type interface
  functionMaps = {
    serviceAdded: this.getAllServices.bind(this)
  }

if () {}. Похоже, когда Компоненты загружаются в первый раз, у него нет объявленного объекта.

this.msgService.readMessage().subscribe(msg => {
  if(this.functionMaps[msg]){
    this.functionMaps[msg]();
  }
})