0

我的要求是在页面上显示错误和成功的警报消息。我正在关注 stackblitz 演示https://stackblitz.com/edit/angular-9-alerts-mdhjed?file=app%2Fapp.component.html 并发现它可以显示同一页面的警报消息，但还不够。我还创建了 forRoot 模块，用于通过所有组件共享相同的服务。

在给定的例子

<app-alert></app-alert>

仅在 app.component.ts 文件中声明并且警报仅到达特定位置，但我希望它在不同的不同位置页面明智地显示在我的屏幕上。

IE

登录屏幕 - 标题
仪表板上方 - 表单下方等...

所以我放置 在基于设计的每个组件中，所有从同一组件发出但不工作的警报消息都来自另一个组件。

就像保存消息警报并重定向到另一个页面并在那里显示警报消息需要数据从一个屏幕传输到另一个屏幕，如下所示。

登录 .html

登录组件.ts

constructor(  
private router: Router,
private alertService: AlertService
) {
 const alerts = this.router.getCurrentNavigation()?.extras.state;
    console.log(alerts);

    if (alerts && alerts['message']) {
      alertService.createNewBasedOncode(alerts['message']);
    }
}

忘记密码 HTML

<app-alert></app-alert>

忘记密码组件

 data: NavigationExtras = {
    state: {
      message: this.alertMessage,
    },
  };


 this.alertMessage = {
            message: res.message,
            config: {
              keepAfterRouteChange: true,
            },
            type: AlertType.Success,
          };

   this.router.navigate(['/'], this.data);

这种方式只有在另一个屏幕上的警报才有效，但这对于构造函数中的每个组件来说似乎是不必要的代码。

我想知道最好的解决方案。

4

0 回答 0