Как инициализировать компонент из сервиса для всплывающих сообщений

Question

Я хочу сделать глобальную службу тостов в моем приложении с собственными стилями и HTML для тостов. Я использую ng2-toastr. Например, у меня есть компонент А. В поле зрения у меня есть кнопка:

<button (click)="showSuccess()">Click</button>

в контроллере у меня есть функция showSuccess:

showSucess() {
    this.toastrService.showSuccess({
      enableHTML: true,
      toastLife: 3000,
    });
  }

В моем ToastrService у меня есть функция showSuccess:

  import { Injectable } from '@angular/core';
  import { ToastsManager } from 'ng2-toastr/ng2-toastr';

  @Injectable()
  export class ToastrService {
    constructor(public toastr: ToastsManager) {}
    showSucess() {
      this.toastr.custom('<span style="color: #bd362f">This message should be in red with blank background. Click to dismiss.</span>',
      'Custom Message', {dismiss: 'click'});
    }
  }

this.toastr.custom - в этой функции я устанавливаю свой собственный шаблон тоста. Теперь я хочу сделать компонент с этим шаблоном, потому что я хочу удалить этот шаблон из сервиса.

Как я могу заменить эту строку HTML с компонентом? Я хочу заменить эту строку на innerHTML компонента или что-то вроде этого. Я хочу поделиться в этом компоненте с опциями тостов из компонента в верхней части моего вопроса.

В AngularJs я использовал $templateCache для получения html из файла, но в angular2 + я не могу найти что-то подобное.

Answer 1

Я думаю, вы не можете использовать компонент вместо строки с разметкой HTML. Посмотрите здесь на исходный код.

Строка 158 имеет пользовательский метод:

custom(message: string, title?: string, options?: any): Promise<Toast>

Вы должны предоставить строку, а не компонент.

Что вы можете сделать, это прочитать это из внешнего файла, такого как json, используя HttpClient.