Question

我的应用程序中有两个组件 - MasterComponent 和 DetailsComponent

单击 MasterComponent 中的选项后，它将路由到 DetailsComponent ，同时我需要将一些动态对象传递给 DetailsComponent 。据我所知，实现这个目标的方法很少

1]使用路由器参数

我无法使用路由器参数传递对象，只能传递字符串，因为它需要反映在URL中。

2]使用共享服务

我们可以通过共享服务传递复杂对象，但在重新加载页面时，服务中的数据将被清除。我需要在页面重新加载时保留数据。

还有其他方法可以将动态复杂数据传递给路由组件吗？任何帮助表示赞赏。感谢。

Answer 1

我会使用共享服务。在我的拙见中，这确实是最好的方法。

请检查：https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

这个例子非常自我解释！：d

该服务与侦听器一起使用，因此您订阅它。当两个组件都订阅它时，数据流是一致且流畅的。我自己使用这种方法在我的后端服务器和我的应用程序中的3个组件之间进行通信。

我的数据流如下：

组件A 从服务器接收数据。将其存储到object并调用共享服务中的方法传递此object。
组件B 会侦听此方法并接收从组件A传递到共享服务的数据。
与组件C 相同的方法。

这是流程你在寻找什么？

更新 （重新加载时保存数据） ：

存储数据选项：

localStorage的
曲奇
会话

链接：

希望它有所帮助！好编码！

Answer 2

您可以使用Resolve执行此操作;假设您需要通过您的某个服务从您的数据库获取用户信息，并且需要在您的详细信息组件中显示它。

解析路线数据将使您能够在激活所选路线之前获取数据。

在你的路线配置中：

{
  path: 'user/:id',
  component: 'UserDetailComponent',
  resolve: {
    userProfile: "UserProfileResolverService"
  }
}

您的UserProfileResolverService将是：

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve } from "@angular/router";
import { User } from "path";
import { UserService } from "path to your service";

@Injectable()
export class UserProfileResolverService implements Resolve<any>{

  constructor(private userService: UserService) { }

  resolve(route: ActivatedRouteSnapshot){

    return this.userService.getUser(route.paramMap.get('id'))
        .toPromise()
        .then(res =>{
          return res.json().data as User[];
        });

  }

}

关于解决路线数据的更多信息，请阅读Pascal Precht的优秀文章：https://blog.thoughtram.io/angular/2016/10/10/resolving-route-data-in-angular-2.html

路由

2 个答案: