Question

我想在我的应用程序中使用自己的样式和html进行全球敬酒服务。我正在使用ng2-toastr。例如，我有组件A.在视图中我有按钮：

<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 - 在这个函数中我设置了自己的toast模板。现在，我想用这个模板做组件，因为我想从服务中删除这个模板。

如何用HTML替换此字符串与组件？我想用component的innerHTML替换这个字符串，或类似的东西。我想在这个组件中分享来自问题顶部的组件的toast选项。

在AngularJs中，我使用$ templateCache从文件中获取html，但在angular2 +中，我无法找到类似的内容。

Answer 1

我猜你不能使用组件而不是带有html标记的字符串。看看here at the source code。

第158行使用自定义方法：

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

你必须提供一个字符串，而不是一个组件。

你可以做的是使用HttpClient从外部文件（如json）中读取它。

如何为toast消息的服务初始化组件

1 个答案: