角度4中从一个分量到另一个分量的数据

Question

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

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

当我单击“查看/编辑”按钮时，它将转到其他选定的组件。component（URL路径：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>

Answer 1

对于要选择项目的项目 列表 ，我个人更喜欢在路径上传递所选项目的ID。 这很简单，并且在Angular文档中有很好的解释。

你需要做什么

在列表组件上 ：-选择ViewEdit时，将获取所选项目的ID并将其放在路径上

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

在详细信息Component上：初始化组件时，将获得设置的ID

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

您可以在此链接上找到更多详细信息