Question

我试图在用户登录页面中使用<p-toast>来显示用户登录时的通知消息。

<p-toast position="top-center" key="tc"></p-toast>

然后在我的组件中声明消息。

ngOnInit() {

    // add toasts
    this.messageService.addAll([
      {key: 'tc', severity: 'info', summary: '30 Nov 2020', detail: 'Important message 1'},
      {key: 'tc', severity: 'info', summary: '30 Nov 2020', detail: 'Important message 2'}
    ]);

    // do other stuff

}

这不起作用。为了确认我的吐司或消息没有问题，我将消息放置在页面上的onClick()事件内，并手动触发了该事件，确实起作用。

如何让吐司在页面加载时触发？

Answer 1

尝试使用AfterViewInit

问题可能是因为尚未呈现HTML，所以请尝试以下操作。这是一个Angular Life Cycle挂钩，仅在初始化HTML时才会触发。

请确保将其添加到正在使用它的类中，如下面的代码片段所示，继续将ngOnInit用于不需要初始化和访问HTML的其他逻辑。

class MyComponent implements AfterViewInit, ngOnInit {

  ngAfterViewInit() {
    this.messageService.addAll(
    [{key: 'tc', severity: 'info',
    summary: '30 Nov 2020', detail: 'Important message 1'},
    {key: 'tc', severity: 'info',
    summary: '30 Nov 2020', detail: 'Important message 2'}]);
  }

  ngOnInit() {
  //for other logic that does not require the HTML to be initialized.
  }

}

如果ExpressionHasChangedAfterItHasBeenCheckedError遇到任何问题，则可以选择使用其他生命周期挂钩来查找要初始化的视图。

这将是AfterContentInit，并且将与上面的示例完全相同地使用。在给定的示例中，最适合您的方法。如果最简单的解决方案是setTimeout，那么如果没有其他问题的话，那就去解决。建议您在使用框架的同时使用Angular。

Answer 2

视图初始化后，您必须发送消息。

但是，通过触发ngAfterViewInit挂钩中的消息，您可能会得到ExpressionChangedAfterItHasBeenCheckedError。

以下是避免此错误的解决方案：

第一个解决方案是在一切初始化之后，使用setTimeout调用来发送消息。

这是一个简单的Stackblitz example

ngAfterViewInit() {
    setTimeout(() => {
        this.messageService.addAll([
            {key: 'tc', severity: 'info', summary: '30 Nov 2020', detail: 'Important message 1'},
            {key: 'tc', severity: 'info', summary: '30 Nov 2020', detail: 'Important message 2'}
        ]);
    })
}

另一种解决方案是使用ChangeDetectorRef（see this article）强制进行更改检测：

constructor(private messageService: MessageService, private cd: ChangeDetectorRef) { }

ngAfterViewInit() {
    this.messageService.addAll([
        {key: 'tc', severity: 'info', summary: '30 Nov 2020', detail: 'Important message 1'},
        {key: 'tc', severity: 'info', summary: '30 Nov 2020', detail: 'Important message 2'}
    ]);
    this.cd.detectChanges()
}

如何在页面加载时触发Toast？

2 个答案: