PrimeNG Toaster 未显示 - Angular 6

Question

我正在尝试实施 PrimeNG 烤面包机，但它没有显示，不确定我错过了什么。我按照这样的步骤操作：

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

在提供者中，我有来自 的 MessageService primeng/api。

现在，在我的 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 ，并为消息添加了一个字符串。

app.component.ts我在其中添加了：<p-toast></p-toast>

没有抛出错误，只是没有弹出烤面包机......

Answer 1

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

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

我希望这有帮助。