如何在路由之间传递数据 - 而不是查询参数。角 5

Question

我正在使用 Angular 5，我如何将数据从不同的模块传递到不同的组件。

我尝试过共享服务。尝试过，重播主题，行为主题和主题。路线更改后数据正在消失。请帮忙。

组件1

this.sharedService.setReferenceObject(data);
this.router.navigateByUrl('component2');

共享服务

export class SalesOrderService {

myReferenceSubj = new ReplaySubject<MyReference>(null);
public myReferenceSubj$ = this.myReferenceSubj.asObservable();

constructor(){}
  setReferenceObject(data: MyReference) {
    this.myReferenceSubj.next(data);
  }
}

组件 2

constructor(){
this.sharedService.myReferenceSubj$.subscribe(data => {
            console.log(data, "data++++") // returning null
          });
}

数据为空。有什么方法可以通过路由传递数据，而不需要查询参数？

Answer 1

一年后，有了这个回复，但对我有帮助的是我创建了一个服务，并在我希望将数据传递到的组件中使用了依赖注入。注入服务后，我订阅了数据并将其保存在会话存储中。使用 ngOnInit 我检索了存储在会话存储中的最后一个数据。基本上，您需要页面以某种方式保留数据。这可以通过创建一个数据库来存储数据，通过获取浏览器历史记录或通过将数据存储在会话存储中来完成（这种方法的问题是，如果它的敏感数据将被暴露，除非你可以找到一种编码方式。

constructor(private sharedService: SalesOrderService){}

retrievedData:any;

ngOnInit(){
  this.getData()
}

getData(){
 sessionStorage.clear()
 this.sharedService.myReferenceSubj$.subscribe(data => {
        sessionStorage.setItem('myData', data)
        this.retrievedData = sessionStorage.getItem('myData')
  });
}  

`

Answer 2

请尝试使用依赖注入语法在组件 2 中创建“sharedService”实例，并将 myReferenceSubj$ 对象设为 BehaviourSubject。

constructor(private sharedService: SalesOrderService){
}

ngOnInit(){
    this.sharedService.myReferenceSubj$.subscribe(data => {
            console.log(data, "data++++") 
   });
}