Angular - 在组件之间共享数据，获取空数据答案

【问题标题】：Angular - Sharing the data between components, getting null dataAngular - 在组件之间共享数据，获取空数据
【发布时间】：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

标签： angular typescript angular-components

【解决方案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>

【讨论】：