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

在提供程序中，我有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>

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

Answer 1

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

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

我希望这会有所帮助。

Answer 2

您可能想尝试一下，看看它是否可以工作：

import { NgZone } from '@angular/core';
constructor(private ngZone: NgZone, ...)
this.ngZone.run(() => {
      this.messageService.add({
        severity: "success",
        summary: "Success Message",
        detail: "Order submitted"
      });
});

请参考此线程： https://forum.primefaces.org/viewtopic.php?f=35&t=56743&p=172855&hilit=Toast#p172855

PrimeNG烤面包机未显示-Angular 6

2 个答案: