Question

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

服务：

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

}

在组件1 getData()方法之前调用了组件2构造函数。两个组件都在同一个页面中，我希望component1先加载，然后再加载component，以便将数据从component1导入到component2中。

在另一个基本组件中，我使用了以下两个选择器：

<component1></component1>

<component2></component2>

Answer 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-在组件之间共享数据，获取空数据

1 个答案: