Angular 显示在其他路由中提交的成功消息答案

【问题标题】：Angular show Success Message of Submit in other RouteAngular 显示在其他路由中提交的成功消息
【发布时间】：2020-09-09 09:56:07
【问题描述】：

我做了一个带有标题的 http 帖子。在这篇文章之后，我导航到客户列表并希望显示包含条目的成功消息。如何在其他路线上显示消息？这是我的代码：

postData({
  let url = "api.url"
  var header = new HttpHeaders .... // etc.
  this.http.post(url, { company: this.form.value.company }, { headers (header)}).toPromise().then((data: any) => { console.group(data) })

在发布路由到页面显示消息后：

this.router.navigate(['customer']);
this.showMsg = true;

这是我的html

<div *ngIf="showMsg">Success</div>

但没有显示成功消息。为什么？我该怎么办？非常感谢您的帮助！

【问题讨论】：

标签： json angular post request

【解决方案1】：

您需要使用数据共享实体，例如服务。例如，您可以有一个包含以下内容的服务：

  private msgSubject: BehaviorSubject<void> = new BehaviorSubject<void>(void 0);
  public msg$: Observable<void> = this.msgSubject.asObservable();
  
  showMsg(): void {
     this.msgSubject.next();
  }

然后在重定向后导航到的组件中，您只需注入服务，然后订阅可观察的msg$：

this.msgService.msg$.subscribe(() => (this.showMsg = true));

您还需要在发布成功后调用服务的showMsg 方法。

【讨论】：

您好，蒂姆，非常感谢！我尝试了代码，但我遇到了一些麻烦。你能给我更多的帮助吗？目前我创建了服务名称 "friends.service.ts" 。我如何获得 BehaviorSubject ？如果你能把更多的使用细节发给我，那就太好了。
在这两个组件中，路由之前的那个和你导航到的组件都会在构造函数中注入服务：private friendsService: FriendsService。然后在导航到的组件的 ngOnInit 上订阅 observable msg$。在您发布的组件上，您拥有 router.navigate 的地方添加 this.friendsService.showMsg()。这将触发订阅并在您的第二个组件上显示消息