Angular - 在组件之间共享数据,获取空数据
Posted
技术标签:
【中文标题】Angular - 在组件之间共享数据,获取空数据【英文标题】:Angular - Sharing the data between components, getting null data 【发布时间】:2019-01-22 13:46:04 【问题描述】:我正在尝试将从一个组件中的服务接收到的数据共享到另一个组件,但得到空数据。
服务:
@Injectable()
export class AService
private data = new BehaviorSubject<any>(null);
public data$ = this.data.asObservable();
getData()
// http get service
setData(newData)
this.data.next(newData);
组件 1:
@Component(
selector: "component1",
templateUrl: "../html/component1.html",
styleUrls: ["../css/component1.css"],
providers: [AService]
)
export class Component1 implements OnInit
constructor(private aService: AService)
getData(corpId: string, type: string)
this.aService
.getData
.subscribe(newData =>
this.aService.setData(newData);
// some other code.
);
组件 2:
@Component(
selector: "component2",
templateUrl: "../html/component2.html",
styleUrls: ["../css/component2.css"],
providers: [AService]
)
export class Component2 implements OnInit
newData: any;
constructor(private aService: AService)
this.aService.data$.subscribe(data => this.newData = data); // data is null as this statement is getting called first before the component 1
组件 2 构造函数在组件 1 getData()
方法之前被调用。两个组件都在同一个页面中,我希望先加载组件 1,然后再加载组件,以便将组件 1 中的数据获取到组件 2。
在另一个基本组件中,我使用了两个选择器,如下所示:
<component1></component1>
<component2></component2>
【问题讨论】:
您的代码甚至无法编译。发布可编译并重现您面临的问题的代码。不要放置 cmets 而不是与您的问题相关的关键代码。当你在做的时候,把它作为一个堆栈闪电发布,这样我们就可以看到问题的实际效果。 从概念上讲,您的组件应该按照描述的方式工作。但如果没有上述要求的有效堆栈闪电战,就很难看出是什么导致了问题。 你的代码在做两个简单的修改后就可以工作 1. 在服务私有数据更改为公共 2. 在组件 2 中 this.aService.data$ 更改为 this.aService.data 【参考方案1】:我应该建议您将 ngIf(在 html 父级中)和您的服务中的另一个变量结合起来。像这样,当组件 1 完成后,它会更新变量,然后加载组件 2。
服务:
import Injectable from "@angular/core";
import BehaviorSubject from "rxjs";
@Injectable()
@Injectable(
providedIn: "root"
)
/**
* Service to manage all the global variables in order to use it in different components
*/
export class AService
private data = new BehaviorSubject<any>(null);
public data$ = this.data.asObservable();
// Global variable to know if component 1 is done
private isComponent1Source = new BehaviorSubject(false); // Set up the source
isComponent1 = this.isComponent1Source.asObservable(); // Make it Observable
constructor()
/**
* Function to change the variable from a component
* @param done boolean to display the info experiment
*/
setIsComponent1(done: any)
this.isComponent1Source.next(done);
getData()
// http get service
setData(newData)
this.data.next(newData);
组件 1:
@Component(
selector: "component1",
templateUrl: "../html/component1.html",
styleUrls: ["../css/component1.css"],
providers: [AService]
)
export class Component1 implements OnInit
constructor(private aService: AService)
getData(corpId: string, type: string)
this.aService
.getData
.subscribe(newData =>
this.aService.setData(newData);
this.aService.setIsComponent1(true);
// some other code.
);
组件 2
@Component(
selector: "component2",
templateUrl: "../html/component2.html",
styleUrls: ["../css/component2.css"],
providers: [AService]
)
export class Component2 implements OnInit
newData: any;
constructor(private aService: AService)
this.aService.data$.subscribe(data => this.newData = data);
父组件:
@Component(
selector: "componentParent",
templateUrl: "../html/componentparent.html",
styleUrls: ["../css/componentParent.css"],
providers: [AService]
)
export class ComponentParent implements OnInit
done = false;
constructor(private aService: AService)
this.aService.isComponent1.subscribe(res => this.done = res);
父 HTML:
<component1></component1>
<component2 *ngIf="done"></component2>
【讨论】:
以上是关于Angular - 在组件之间共享数据,获取空数据的主要内容,如果未能解决你的问题,请参考以下文章