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

Question

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

<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

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

但是，通过触发ngAfterViewInit钩子中的消息，您可能会得到一个ExpressionChangedAfterItHasBeenCheckedError.

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

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

这是一个简单的Stackblitz 示例

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 （请参阅本文）强制更改检测：

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()
}

Answer 2

尝试使用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来发挥自己的优势。