从一个组件到另一个组件共享数据答案

【问题标题】：Sharing Data From One Component To Another从一个组件到另一个组件共享数据
【发布时间】：2021-02-06 21:06:53
【问题描述】：

范围：

嗨，

我有简单的 Ionic Angular 应用程序。它有 2 个标签和 1 个页面。一个 Tab2，有一个读取静态 JSON 文件的服务正在显示的日期列表。当用户选择特定日期时，它应该转到页面（第一页）并显示该特定日期的额外详细信息。

我目前所拥有的：

目前，仅出于测试目的，我将 Tab2 中的静态硬编码数据共享到页面（第一页）。

Tab2.html 文件：

  <ion-list *ngFor="let item of outbreak; let i = index;">
    <ion-item [routerLink] = "['/page-one', 'This is the data from Tab2']">{{ item.date }}</ion-item>
  </ion-list>

page-one.ts 文件：

export class PageOnePage implements OnInit {

  constructor(private route: ActivatedRoute) {}

  data: any;

  ngOnInit() {
    this.data= this.route.snapshot.params.id;
    console.dir(this.route.snapshot);
  }

当然，我更新了 app-routing.module.ts 文件：

  {
    path: 'page-one/:id',
    loadChildren: () => import('./pages/page-one/page-one.module').then( m => m.PageOnePageModule)
  }

问题/问题：

我试过

ts
<ion-item routerLink="/page-one" fragment="outbreak-{{ i }}">{{ item.date }}</ion-item>

在 Tab2.html 文件中，该文件确实正确格式化了 URL，但同样，在它转发到第一页后，没有数据显示。因此，当用户单击列表中的日期/索引时，它应该将它们路由到第一页并显示该特定日期的详细信息。我想我可以通过阅读 URL 然后显示它来阅读点击了哪个索引/日期？不确定，但希望有人可以提供帮助。我只想使用 routerLink 或 router.navigate。

谢谢！

作为参考，JSON 文件是一个对象数组：

[
    {
      "date": "2020-11-01",
      "outbreak_group": "1 Congregate Care",
      "outbreak_subgroup": "1 Long-Term Care Homes",
      "number_ongoing_outbreaks": 73
    },
    ...
    ...
    ]

【问题讨论】：

标签： angular typescript ionic-framework data-sharing

【解决方案1】：

有很多选项可以在组件之间共享数据。你可以在这里阅读更多：

Google -> Sharing data between components

不过你可以试试下一个：

Tab2.html

 <ion-list *ngFor="let item of outbreak; let i = index;">
    <ion-item (click)="goToItem(item)">
        {{ item.date }}
    </ion-item>
  </ion-list>

Tab2.ts

constructor(private navCtrl: NavController)

public goToItem(item){
   this.navCtrl.navigateForward('/path/to/page1',{queryParams:{item}})
}

Page1.ts

import { ActivatedRoute } from "@angular/router";
//...
export class YourPageOne {
  public item = null;
  constructor(private route: ActivatedRoute) {
    this.route.queryParams.subscribe(params => {
        if(params && params.item)
          this.item = params["item"];
    });
}

这不是最好的，只是一种选择。最佳选择取决于每种情况

【讨论】：

【解决方案2】：

在组件之间共享数据有不同的方式。

使用Singleton Service 共享数据的最佳推荐方式。示例：here
如果组件有父子关系，那么您可以通过@Input() 和@Output() 参数传递您的数据。示例here
如果组件是同一级别或兄弟，那么您也可以使用Subject 和BehaviorSubject 形式RxJs operator。示例here

对于您的方案，Subject 和 BehaviorSubject 最适合您希望在两个选项卡之间共享数据。但是，您仍然可以根据您的应用程序检查可以使用哪种方法。

【讨论】：