Question

为了减少我的Web应用程序中的primast吐司组件（p-toast）的数量，我尝试使用中央p-toast和app.component中的键。然后，使用带有该Toast组件键的messageservice添加来自其他组件的消息。不幸的是，吐司没有显示。

我的app.component.html

my_final_array

我的app.component.ts

<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>

从组件内部（通过routeroutlet显示），我添加一条消息：

@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
  ) {...

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

  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'
  });
});

这些都不起作用。

我忘记了什么吗？还是不应该像这样使用p-toast？

Answer 1

您只需要更改一些其他内容

1）将ToastModule添加到AppModule导入列表中

2）将MessageService添加到AppModule提供程序列表中

3）从任何其他组件的providers数组中删除MessageService，您仍然可以导入MessageService并从任何组件执行this.messageService.add

然后尝试

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

1 个答案: