最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Angular PrimeNg singleton services ( Confirm , Message) show twice in view - Stack Overflow

programmeradmin4浏览0评论

i have an Angular V19.0 application , there is an issue with primeNg toast and confirm services. i have provided the services in a core module which is imported in app.module.ts

but when ever i inject and use these services , i get 2 dialogs or toasts per click. also the first click does not show the toast or confirm dialog.

and also the toast component does not work if the key property is not provided.

-----------------------HTML----------
<ng-container *ngIf="toastMessageKey | async as tKey">
  <p-toast position="top-left" baseZIndex="999999" [key]="tKey" life="100000"/>
</ng-container>
------------------------TS-----------
    this.toastMessageKey = this.messageService.messageObserver.pipe(
      filter((x) => x !== null && x !== undefined),
      map((t) => (<ToastMessageOptions>t).key ?? 'toast'),
    );

without the code above , the toast message does not even show it self. and i even tried replicating my code to another project with the same structure (lazy loaded modules...etc)

it worked like a charm.

i don't know where have i done a mistake. I'm busting my head to a wall for this. it does not give me any errors or anything at all. but all i figured out was the confirm or toast observer are being triggered twice by each call.

------Layout service---
openToast(toast: ToastMessageOptions) {
    this.toastService.add(toast);
  }

i have an Angular V19.0 application , there is an issue with primeNg toast and confirm services. i have provided the services in a core module which is imported in app.module.ts

but when ever i inject and use these services , i get 2 dialogs or toasts per click. also the first click does not show the toast or confirm dialog.

and also the toast component does not work if the key property is not provided.

-----------------------HTML----------
<ng-container *ngIf="toastMessageKey | async as tKey">
  <p-toast position="top-left" baseZIndex="999999" [key]="tKey" life="100000"/>
</ng-container>
------------------------TS-----------
    this.toastMessageKey = this.messageService.messageObserver.pipe(
      filter((x) => x !== null && x !== undefined),
      map((t) => (<ToastMessageOptions>t).key ?? 'toast'),
    );

without the code above , the toast message does not even show it self. and i even tried replicating my code to another project with the same structure (lazy loaded modules...etc)

it worked like a charm.

i don't know where have i done a mistake. I'm busting my head to a wall for this. it does not give me any errors or anything at all. but all i figured out was the confirm or toast observer are being triggered twice by each call.

------Layout service---
openToast(toast: ToastMessageOptions) {
    this.toastService.add(toast);
  }

Share Improve this question asked Jan 29 at 21:44 Pouya BabaiePouya Babaie 7910 bronze badges 2
  • did you add <p-toast /> tag in parent of this component? i mean maybe you added this tag twice – Mojtaba Nejad Poor Esmaeili Commented Jan 30 at 0:38
  • @MojtabaNejadPoorEsmaeili unfortunatly , there is only one p-taost tag in app component. – Pouya Babaie Commented Jan 31 at 14:58
Add a comment  | 

1 Answer 1

Reset to default 1

The problem could be due to SSR being on, it open once on the server and once on the browser, the solution is to wrap the logic in a defer block so that executes only on the browser.

@defer() {
  <ng-container *ngIf="toastMessageKey | async as tKey">
    <p-toast position="top-left" baseZIndex="999999" [key]="tKey" life="100000"/>
  </ng-container>
}
发布评论

评论列表(0)

  1. 暂无评论