应用程序组件中的 prime-ng p-toast 不显示从其他组件发送的消息

Question

为了减少我的网络应用程序中 primeng toast 组件 (p-toast) 的数量，我尝试使用带有 app.component 键的中央 p-toast。然后我使用带有该 toast 组件键的消息服务添加来自其他组件的消息。不幸的是，没有显示祝酒辞。

我的app.component.html

<div>
  <app-header></app-header>
  <router-outlet></router-outlet>
  <app-footer *ngIf="!userLoggedIn"></app-footer>
</div>
<p-toast [style]="{ marginTop: '80px' }" key="myToast"></p-toast>

我的app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [MessageService]
})
export class AppComponent implements OnInit, OnDestroy {

  constructor(
    private readonly messageService: MessageService
  ) {...

从一个组件中（通过 routeroutlet 显示）我添加一条消息：

  this.messageService.add({
    severity: 'success',
    summary: 'Success Message',
    key: 'myToast',
    detail: 'Order submitted'
  });

我还尝试了以下替代方法：

this.ngZone.run(() => {
  this.messageService.add({
    severity: 'success',
    summary: 'Success Message',
    key: 'myToast',
    detail: 'Order submitted'
  });
});

和

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

None 的作品。

我是不是忘记了什么？或者 p-toast 不应该这样使用？

Answer 1

你只需要再改变一些东西

1) 将 ToastModule 添加到 AppModule 导入列表

2) 将 MessageService 添加到 AppModule 提供者列表

3) 从任何其他组件的提供程序数组中删除 MessageService，您仍然可以导入 MessageService 并从任何组件 this.messageService.add

那就试试吧

应用程序组件中的 prime-ng p-toast 不显示从其他组件发送的消息

prime-ng p-toast in app component not displaying messages sent from other components

primeng

angular