以角度 2 将整个对象从一个组件发送到另一个组件 [英] Sending whole object from one component to another in angular 2
问题描述
我有问题.我不知道如何将对象从一个组件发送到另一个组件.
I have a problem. I don't know how to send object from one component to another.
在第一个组件 cinema.component.html 中,我有以下函数调用:
In first component cinema.component.html I have following function call:
<a title="Reserve" (click)="openReservationPage(repertoire)">Reserve</a>
在 cinema.component.ts 文件中,对于那个 .html 我有类似的东西:
In cinema.component.ts file, for that .html I have something like:
openReservationPage(repertoire: UpcomingRepertoire) {
this.router.navigate(['/reserve', {repertoire: JSON.stringify(repertoire)}]);
}
我的 app.routes.ts 文件包含适当的路由:
My app.routes.ts file contains appropriate routing:
{ path: 'reserve', component: ReserveFormComponent }
如何在另一个页面 reserve-form.component.ts 和 reserve-form.component.html 中使用这个 repertoire 对象?
How can I use this repertoire object in another page reserve-form.component.ts and reserve-form.component.html ?
推荐答案
作为标题中问题的答案,我会说创建一个服务来在组件之间传递数据.
As an answer for the question in the title, i would said create a service to pass data between components.
由于它是一个路由器实现,您可以将曲目作为路由参数传递.
Since its a router implementation you can pass the repertoire as a route parameter.
请按照以下步骤操作:
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 当您确定每次导航到组件时都会传递参数.
Technique 1 is adopted when you are sure that the param will be passed every time you navigate to the component.
技术 2 是在发布参数后订阅 observable 但不要忘记在 ngOnDestroy() 组件的生命周期方法中取消订阅以防止内存泄漏.
Technique 2 is a subscription to the observable once there a param published but don't forget to unsubscribe in the ngOnDestroy() component's life cycle method to prevent memory leak.
这更可取,因为有时会出现在创建后将参数传递给组件的情况,其中快照方法不会捕获,并且与技术 1 中的基本情况相比,它在不同情况下更灵活.
It is more preferable because some times there a scenario that a param is passed to a component after it was created where the snapshot method wouldn't capture and it more flexible with different scenario than the basic one in technique 1.
这篇关于以角度 2 将整个对象从一个组件发送到另一个组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!