javascript - 将整个对象以 Angular 2 从一个组件发送到另一个组件

Question

我有一个问题。我不知道如何将对象从一个组件发送到另一个组件。

在第一个组件cinema.component.html中，我有以下函数调用:

<a title="Reserve" (click)="openReservationPage(repertoire)">Reserve</a> 

在 cinema.component.ts 文件中，对于 .html 我有类似的内容:

openReservationPage(repertoire: UpcomingRepertoire) {
    this.router.navigate(['/reserve', {repertoire: JSON.stringify(repertoire)}]);
}

我的app.routes.ts文件包含适当的路由:

{ path: 'reserve', component: ReserveFormComponent }

如何在另一个页面 reserve-form.component.ts 和 reserve-form.component.html 中使用这个 repertoire 对象？

Answer 1

作为标题中问题的答案，我会说创建一个服务来在组件之间传递数据。

由于它是一个路由器实现，因此您可以将轨道作为路由参数传递。

请按照以下步骤操作:

1)修改app.routes.ts中的路由以获取参数

{ path: 'reserve/:repertoire', component: ReserveFormComponent }

2)在cinema.component.ts中将轨道作为参数传递

this.router.navigate(['/reserve',JSON.stringify(repertoire)]‌​);

3)提取reserve-form.component.ts中的参数

首先你需要导入

 import {ActivatedRoute } from "@angular/router";

技术 1

repertoire:any;

constructor(private activatedRoute: ActivatedRoute) {
    this.repertoire = JSON.parse(activatedRoute.snapshot.params["repertoire"]);
  }

技术 2

import { Subscription } from "rxjs/Rx";

private subscription: Subscription;
repertoire:any;

constructor(private activatedRoute: ActivatedRoute) {
    this.subscription = activatedRoute.params.subscribe(
      (param: any) => this.repertoire = JSON.parse(param['repertoire'])
    );
  }

  ngOnDestroy() { // here we unsubscribe to the observable
    this.subscription.unsubscribe();
  }

进一步说明:

当您确定每次导航到组件时都会传递参数时，就会采用技术 1。

技术 2 是在发布参数后订阅可观察对象，但不要忘记在 ngOnDestroy() 组件的生命周期方法中取消订阅以防止内存泄漏。

这是更可取的，因为有时会出现一种情况，即在创建组件后将参数传递给组件，而快照方法无法捕获，并且它比技术 1 中的基本方案更灵活地适应不同的情况。