Question

我需要在路由器导航时将复杂的对象从组件1传递到组件2。在这里，我的对象由一个整数值列表和两个整数字段组成。当用户在网格上选择时，将获得整数值列表。当用户单击按钮时，导航到组件2。我使用了行为主体来传输数据，并且它正在运行。问题是在浏览器中刷新页面（compoent2）时数据变为空。

这是我的服务

export class CustomDataService {

 constructor() {}
 private customData$: BehaviorSubject < any > = new BehaviorSubject < any > (null);

 setData(data: any) {
     this.studentSerachData$.next(data);
 }

 getData() {
     if (this.customData$: getValue()) {
         return this.customData$: asObservable().share();
     }
 }

我已将此服务添加到共享模块的提供程序数组中，并将此模块导入了组件1和组件2。第一次加载页面时，我正在组件2上获取数据。刷新路线时，我会得到未定义。

Answer 1

摆脱此问题的最佳方法是通过Queryparams发送对象，因此在页面刷新时您不会丢失数据，但是如果您不喜欢queryparams和长网址，请尝试将对象添加到Localstorage因此，在第一次使用后，您可以从localStorage读取它，但是如果您来自项目外部或其他未触发行为主体转移的地方，则无法通过这种方式获取对象。

选项1 ：

let params = {};
params[object]=JSON.stringify(objectyouwanttohaveincomponent2)
this.router.navigate(['whatevercomponent2Routeis'], {queryParams: params});

然后在组件2的ngOninit中：

object : any = {} ;
constructor(private router: Router,
            private route: ActivatedRoute){}
ngoninit(){
this.object = JSON.parse(this.route.snapshot.queryParamMap.get('object'));
}

选项2：

获取数据后，您只需将其添加到localStorage中，然后下次进行检索：

localStorage.setItem('object',customData$);

ngoninit(){
    if (localStorage.getItem('object')) {
        this.object = localStorage.getItem('object');
    }
}

如何在路由器以角度5导航时将持久的复杂对象从组件发送到另一个组件

1 个答案: