角度4中从一个组件到另一个组件的数据答案

【问题标题】：data from one component to other component in angular 4角度4中从一个组件到另一个组件的数据
【发布时间】：2018-09-20 10:08:38
【问题描述】：

我想将数据从一个组件共享到另一个组件。

我在 list.component 中有一个表（url 路径：设置/列表），像这样

当我点击查看/编辑按钮时，它会转到其他组件 selected.component (url path: settings/selected)，它会显示所选行的详细信息，例如他们的姓名、电子邮件地址。

list.component.ts

  getAccountsList() {
    this.http.get<Company>(environment.company,
      { headers: new HttpHeaders({ 'Authorization': 'bearer localStorage.getItem("jwt_token")' }) })
      .subscribe(data => {
        this.company = data;
        console.log(data);
      });
  }

  // Memory optimization trick
  userThumb(index, company) {
    return company ? company.id : undefined;
  }

list.component.html

    <tr *ngFor="let companyData of company?.companies.data; trackBy: userThumb">
                                <td class="text-truncate">{{companyData?.name }}</td>

</tr>

【问题讨论】：

这可以通过使用共享服务来实现。如何实现共享服务参考链接：angulartutorial.net/2017/09/…
这些组件如何相互引用？他们是兄弟姐妹，还是亲子？还是不是我提到的？
他们是兄弟姐妹。
正如@PraveenKumar 所说，您可以创建共享服务并通过它传递数据。或者，您可以向父级发送数据并广播给另一个子级（如果它们具有相同的父级），但这种方式不是很优雅
我猜你甚至可以使用 NgRx 存储或任何 Flux/redux/mobx 框架，如果你的项目足够大，这非常可靠。与流行的看法/惯例相反，你也可以在项目中逐步使用它，不只是全球

标签： javascript angular components

【解决方案1】：

对于项目列表到项目选择的情况，我个人更喜欢在路径上传递所选项目的ID。它简单干净，在 Angular 文档中得到了很好的解释。

你需要做什么

关于列表组件： - 当你选择 ViewEdit 时，你会得到所选项目的 id 并将其放在路径上

 goToItemDetails(id) {
  this.router.navigate(['/item-details', id]);
}

关于细节组件： 当你初始化组件时，你会得到设置的 id

ngOnInit() {
   this.route.params.subscribe(params => {
       this.id = +params['id'];
       // a service that calls item by it's id from the database
    });

你可以在这个link找到更多细节

【讨论】：