时间戳

首页 > 解决方案 > Angular - 在组件之间共享数据，获取空数据

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

问题描述

我正在尝试将从一个组件中的服务接收到的数据共享到另一个组件但获取空数据。

服务： 

@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>

标签： angulartypescriptangular-components

解决方案

我应该建议您将 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>

推荐阅读