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

时间:2020-04-04 11:31:34

标签: angular typescript

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

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

component1

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

sharedService

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
          });
}

数据获取为空。有没有什么方法可以通过路由传递数据而无需使用queryparams?

2 个答案:

答案 0 :(得分:0)

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

constructor(private sharedService: SalesOrderService){
}

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

答案 1 :(得分:0)

一年后有了这个回复,但对我有帮助的是我创建了一个服务并在我希望将数据传递给的组件中使用了依赖注入。注入服务后,我订阅了数据并将其保存在会话存储中。使用 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')
  });
}  

`