0

我想在我的应用程序中使用自己的样式和 html 为 toast 做全局 toasts 服务。我正在使用 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 替换此字符串？我想用组件的 innerHTML 或类似的东西替换这个字符串。我想与问题顶部的组件中的 toasts 选项共享此组件。

在 AngularJs 中，我使用 $templateCache 从文件中获取 html，但在 angular2 + 中我找不到这样的东西。

4

1 回答 1

0

我猜你不能使用组件而不是带有 html 标记的字符串。看看这里的源代码。

第 158 行有自定义方法：

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

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

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

于 2017-10-20T15:50:13.923 回答