Javascript 动态角度注入服务

我用的是角度11。 我正在创建一个包含3个字段的表单页面

• MessageText：输入文本
• ToUser：输入文本
• 发送方式：选择（电子邮件、短信、电报）

以及我的组件逻辑：

import {Component, Injector} from '@angular/core';
import {IMessagingService} from '../service/IMessagingService';
import {EmailService} from '../service/email.service';
import {SmsService} from '../service/sms.service';
import {TelegramService} from '../service/telegram.service';

@Component({
  selector: 'app-send-message-user',
  templateUrl: './send-message-user.component.html',
  styleUrls: ['./send-message-user.component.scss'],
  providers: [EmailService, SmsService, TelegramService]
})
export class SendMessageUserComponent {

  constructor(private scriptInjector: Injector, private script: IMessagingService) {
  }

  sendMessageClick(serviceSelected: string): void {
    this.script = this.scriptInjector.get(serviceSelected);
    let returnStatus = this.script.sendMessage("Message", "User adress");
  }
}

但我不能让它工作

我怎么能得到这个

---

我如何才能使一个通用的工作组件不需要在提供者注释上添加未来的新服务？

您遇到了什么问题？Hello@christiandev，我的错误是：错误错误：未捕获（承诺）：NullInjectorError:R3InjectorError（AppModule）[IMessagingService->IMessagingService->IMessagingService]：NullInjectorError:没有IMessagingService的提供程序！NullInjectorError:R3InjectorError（AppModule）[IMessagingService->IMessagingService->IMessagingService]：NullInjectorError:IMessagingService没有提供程序！

// Inteface
export abstract class IMessagingService {
  abstract sendMessage(text: string, address: string): bool;
}

// Email Service
import {Injectable} from '@angular/core';
import {IMessagingService} from './IMessagingService';

@Injectable({
  providedIn: 'root'
})
export class EmailService implements IMessagingService {

  constructor() { }

  sendMessage(text: string, address: string): bool {
    /* logic here*/
    return true
  }
}

// Sms Service
import {Injectable} from '@angular/core';
import {IMessagingService} from './IMessagingService';

@Injectable({
  providedIn: 'root'
})
export class SmsService implements IMessagingService {

  constructor() { }

  sendMessage(text: string, address: string): bool {
    /* logic here*/
    return true
  }
}

// Telegram Service
import {Injectable} from '@angular/core';
import {IMessagingService} from './IMessagingService';

@Injectable({
  providedIn: 'root'
})
export class TelegramService implements IMessagingService {

  constructor() { }

  sendMessage(text: string, address: string): bool {
    /* logic here*/
    return true
  }
}

import {Component, Injector} from '@angular/core';
import {IMessagingService} from '../service/IMessagingService';
import {EmailService} from '../service/email.service';
import {SmsService} from '../service/sms.service';
import {TelegramService} from '../service/telegram.service';

@Component({
  selector: 'app-send-message-user',
  templateUrl: './send-message-user.component.html',
  styleUrls: ['./send-message-user.component.scss'],
  providers: [EmailService, SmsService, TelegramService]
})
export class SendMessageUserComponent {

  constructor(private scriptInjector: Injector, private script: IMessagingService) {
  }

  sendMessageClick(serviceSelected: string): void {
    this.script = this.scriptInjector.get(serviceSelected);
    let returnStatus = this.script.sendMessage("Message", "User adress");
  }
}