【问题标题】: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 添加到providersNgModule?启动两个组件的顺序是什么?从您提供的代码中不清楚...
  • 你问的没有问题。我想要的是我想将数据解析到其他组件,即使你改变了路线,数据也应该在那里,如果你知道更好的方法,请建议.
  • 服务是单例的吗?服务中有providedIn: 'root'吗?
  • 您可以简单地在服务中保留一个全局变量,并将该变量保留在组件中
  • @SheenaSingla 你能写一个代码吗?

标签: angular typescript


【解决方案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 中订阅没有进入。
猜你喜欢
  • 2022-09-24
  • 1970-01-01
  • 1970-01-01
  • 2016-08-18
  • 2021-08-15
  • 2020-05-26
  • 1970-01-01
  • 2019-11-05
  • 1970-01-01
相关资源
最近更新 更多