Angular2：通过路由器在兄弟组件之间传递数据？

Posted 2023-02-23

【中文标题】Angular2：通过路由器在兄弟组件之间传递数据？

【英文标题】：Angular2: Passing data between sibling components through routers?

【发布时间】：2017-04-26 02:30:46

【问题描述】：

我是 Angular2 的新手。我主要通过官方文档、Mosh 的一个稍微过时的 udemy 课程和一本名为 ng-book2 的书来学习我所掌握的知识。

我有什么 是一种始终存在于页面（顶部）的表单。在它下面是来自数据库的列表。单击列表中的项目会将整个列表替换为该项目的详细信息。单击后退按钮将带您返回列表。表格仍位于顶部。这是一个基本的 CRUD 应用程序。提交表单会将新项目保存到数据库中。

问题 是当我提交表单时，列表不会自动获取新项目：而是我必须刷新页面。其他操作（upvote、downvote、delete）工作正常。

app.component.html：

<app-article-form [listid]="listid" [formid]="formid"></app-article-form>
<router-outlet></router-outlet>

路由器插座显示项目列表或项目详细信息。

程序架构： 我有一个单独的表单组件（ArticleFormComponent），一个单独的列表组件（ArticlesComponent）和一个单独的细节组件（ArticleDetailComponent）。路由在 ArticlesComponent 和 ArticleDetailComponent 之间。

我基本上希望 ArticleFormComponent 通知它的同级 ArticlesComponent 新文章已提交，并且我希望 ArticlesComponent 接收该文章并将其 push() 到 Articles[] 数组中。

我用谷歌搜索了一下，并尝试实现一个发射器服务来广播事件，但问题是我使用的是路由器插座，不知道如何在其中设置输入属性。有人可以指导我正确的方向吗？谢谢。

【问题讨论】：

如果我理解正确，这就是你想要的：angular.io/docs/ts/latest/cookbook/… 它展示了如何通过订阅服务的 Observable 来通知组件。

【参考方案1】：

例如，您可以简单地使用 RxJS 的 ReplySubject 类来实现 PubSub 模式。方法如下：

import  Injectable  from '@angular/core';
import  ReplaySubject  from 'rxjs';

@Injectable()
export class ArticlesPubSubService extends ReplaySubject<IArticle> 

  constructor() 
    super();
  

然后在两个组件中使用这个ArticlesPubSubService：

1) 在articles-form.component.ts 中，您将发出新创建的文章：

import  Component, OnInit  from '@angular/core';
import  ArticlesPubSubService  from '../articles-pub-sub.service';

@Component(
  selector: 'so-articles-form',
  templateUrl: './articles-form.component.html',
  styleUrls: ['./articles-form.component.css']
)
export class ArticlesFormComponent implements OnInit 

  constructor(private aps: ArticlesPubSubService)  

  ngOnInit() 
  

  submit(article) 
    // ... 
    this.aps.next(article);
  

2) 在articles.component.ts，你会得到这篇新文章并将其推送到你的本地文章列表：

import  Component, OnInit  from '@angular/core';
import  ArticlesPubSubService  from '../articles-pub-sub.service';

@Component(
  selector: 'so-articles',
  templateUrl: './articles.component.html',
  styleUrls: ['./articles.component.css']
)
export class ArticlesComponent implements OnInit 

  articles: IArticles[];

  constructor(private aps: ArticlesPubSubService)  

  ngOnInit() 
    this.aps.subscribe( article => this.articles.push(article) );
  
  ngOnDestroy() 
    this.aps.unsubscribe();
  

【讨论】：

嗨瓦西姆，非常感谢！这行得通。但我有个问题。在articles.component.ts 中，ngOnInit() 中的代码行现在每次加载组件时都会运行，无论是否有新文章要添加。我想知道这在生产应用程序中是否是一个好的预期实践，或者我们是否应该以其他方式接近。谢谢！

每次创建 ArticlesComponent 的新实例时都会调用订阅。当您切换视图时会发生这种情况。对于这个特定示例，您可以将订阅调用移至构造函数。没关系。我们基本上是在告诉组件做出反应 IF 有一篇文章要添加到列表中。所以没关系。如果你想避免任何潜在的内存泄漏，请在 ngOnDestroy 中调用 unsubscribe()。 （我将更新我的示例）。