如何将对象传递给其他组件，路由更改数据正在被清除

Posted 2023-02-22

【中文标题】如何将对象传递给其他组件，路由更改数据正在被清除

【英文标题】：How to pass object to other component, on route change data is getting cleared

【发布时间】：2020-06-28 05:06:11

【问题描述】：

我想将一个对象传递给另一个组件。下面是我的方法。但是数据在路线改变时被清除。是否有任何解决方案或是否有任何其他解决方案。

在组件 1 中：

this.myService.setData(this.myData);
this.router.navigateByUrl('component2');

在役：

private myDataSubj = new Subject<MyData>();
setData(myData) 
    this.myDataSubj.next(myData);

getData(): Observable<MyData> 
    return this.myDataSubj.asObservable();

在组件 2 中： 在 ngOninit 中

this.myService.getData().subscribe(data => 
     this.myData = data;
     console.log(this.myData); // Returning Undefined. 
  )

我错过了什么吗？

【问题讨论】：

你如何声明In-Service 类（@Injectable 使用了吗？）？您是否将In-Service 添加到providers 的NgModule？启动两个组件的顺序是什么？从您提供的代码中不清楚...

你问的没有问题。我想要的是我想将数据解析到其他组件，即使你改变了路线，数据也应该在那里，如果你知道更好的方法，请建议.

服务是单例的吗？服务中有providedIn: 'root'吗？

您可以简单地在服务中保留一个全局变量，并将该变量保留在组件中

@SheenaSingla 你能写一个代码吗？

【参考方案1】：

请在询问之前阅读 angular 文档或做一些研究。 请阅读Angular component interaction using service

在高层次上，你想要的是...... [见下文]

更新

在 Angular 5 中支持

模块

providers: [SharedService]
exports: [SharedService]

服务

import  Injectable  from '@angular/core';
import  Subject     from 'rxjs';
import  SharedService  from '........<module path>...';

@Injectable()
export class SharedService 

  // Observable string sources
  private myDataSubj = new Subject<MyData>();

  // Observable string streams
  public myDataSubj$ = this.myDataSubj.asObservable();

  // Service method
  sharedData(myData: MyData) 
    this.myDataSubj.next(myData);
    this.myDataSubj.complete();
  

组件-1

this.sharedService.sharedData(data);

组件-2

this.sharedService.myDataSubj$.subscribe(data => 
    this.myData= data;
    console.log(this.myData);
);

【讨论】：

我的 Angular 版本是 5，在 root 中提供的将不起作用。

这不是有效的借口@SwamyReddy。作为工程师，您必须知道如何处理多个版本。只需删除 providedIn 属性并将其注入模块中的提供程序并从那里导出并导入您的组件。

@SwamyReddy，我已经更新了答案。请参见。并链接指向 angular 5 版本。

尽管，在组件 2 中订阅没有进入。