angular - PrimeNG toastr 未显示 - Angular 6

Question

我正在尝试实现 PrimeNG toastr ，但它没有出现，不确定我缺少什么。我按照这样的步骤操作:

npm install primeng --save
npm install primeicons --save

我在 angular-cli 样式中添加了以下内容:

"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css"

在我导入的 app.module.ts 中

ToastModule,
BrowserAnimationsModule

在提供程序中，我有来自 primeng/api 的 MessageService .

现在，在我的 http 请求服务中，我添加了这段代码:

get(url: string, showSuccessToast?: boolean, toastMessage?: string) {
        const result = this.http.get(url)
            .pipe(map((response: Response) => {

                    if (showSuccessToast) {
                        this.messageService.add({severity: 'success', summary: 'Success!', detail: toastMessage});
                    }
                    return response;
                }),
                catchError(response => this.handleError(response))
            );

        return result;
    }

在我发出 get 请求的组件服务中，我为 showSuccess 添加了 true，为 message 添加了一个字符串。

在 app.component.ts我加了:<p-toast></p-toast>

没有抛出错误， toastr 只是没有弹出......

Answer 1

您的 toast 似乎正在显示，但它只是在您的 View 初始化之前显示。我尝试重新创建您的代码，似乎添加 setTimeout 解决了问题

   setTimeout(() => {
      this.messageService.add({
        severity: "success",
        summary: "Success Message",
        detail: "Order submitted"
      });
    }, 1000);

我希望这会有所帮助。