在Angular 6组件之间共享使用HTTP GET加载的数据[重复]

Question

这个问题在这里已有答案：

• How do I share data between components in Angular 2? 6个答案

我几天Angular 6开发人员;）并阅读有关组件之间共享数据的内容。我有需要使用服务的情况。

我有两个组成部分。

第一种：ClientSearchComponent，它从后端读取数据并将json响应转换为Client对象数组。

第二：带有模板的ListClientComponent，我将从ClientSearchComponent获得这些客户端的表

问题是：如何将这个客户端对象数组从一个共享到另一个 - 我的代码不起作用？我发现了一些exmaples，但是他们使用BehaviorSubject作为参数获取字符串而不是数组。

我的代码

ClientDataService.ts：

import {Injectable} from '@angular/core';
import {Client} from '../models/client';

@Injectable()
export class ClientDataService {

  private data: Client[];

  setData(clients: Client[]) {
    this.data = clients;
  }

  getData() {
    return this.data;
  }
}

ClientSearchComponent.ts

import {Component, OnInit} from '@angular/core';
import {Client} from '../models/client';
import {ClientSearchService} from './client-search.service';
import {ClientDataService} from '../services/client-data.service';

@Component({
  selector: 'app-client-search',
  templateUrl: './client-search.component.html',
  styleUrls: ['./client-search.component.css']
})

export class ClientSearchComponent implements OnInit {
  public clientList: Client[];

  constructor(private clientSearchService: ClientSearchService, private clientDataService: ClientDataService) {
    const css = this.clientSearchService.list('assets/test.json');

    css.subscribe((clients: Client[]) => {
      this.clientList = clients;
      this.clientDataService.setData(clients);
    });

  }

  ngOnInit() {}

}

ClientListComponent.ts

import {Component, OnInit} from '@angular/core';
import {Client} from '../models/client';
import {ClientDataService} from '../services/client-data.service';

@Component({
  selector: 'app-client-list',
  templateUrl: './client-list.component.html',
  styleUrls: ['./client-list.component.css']
})

export class ClientListComponent implements OnInit {
  public clientList: Client[];

  constructor(private clientDataService: ClientDataService) {

    console.log(this.clientDataService.getData());
  }

  ngOnInit() {
  }

}

Answer 1

好。我做的 ：）

我需要使用来自xrjs的Subject。我的第一种方法适用于静态数据。在我的情况下，我从后端通过服务获取数据，因此当创建对象时，我们没有来自支持的数据。

这是正确的代码：

ClientShareService.ts

import {Injectable} from '@angular/core';
import {Client} from '../models/client';
import {Subject} from 'rxjs';

@Injectable()
export class ClientsShareService {

  public shareDataSubject = new Subject<any>();

  public setData(clients: Client[]) {
    this.shareDataSubject.next(clients);
  }

  public getSubject() {
    return this.shareDataSubject;
  }
}

ClientsSearchComponent.ts

import {Component, OnInit} from '@angular/core';
import {Client} from '../models/client';
import {ClientSearchService} from './client-search.service';
import {ClientsShareService} from '../services/clients-share.service';

@Component({
  selector: 'app-client-search',
  templateUrl: './client-search.component.html',
  styleUrls: ['./client-search.component.css']
})

export class ClientSearchComponent implements OnInit {
  public client: Client = new Client();
  public clientList: Client[];

  constructor(private clientSearchService: ClientSearchService, private clientsShareService: ClientsShareService) {
    const css = this.clientSearchService.list('assets/test.json');

    css.subscribe((clients: Client[]) => {
      this.clientList = clients;
      this.clientsShareService.setData(clients);
    });

  }

  ngOnInit() {}
}

ClientsListComponent.ts

import {Component, OnInit} from '@angular/core';
import {Client} from '../models/client';
import {ClientsShareService} from '../services/clients-share.service';

@Component({
  selector: 'app-client-list',
  templateUrl: './client-list.component.html',
  styleUrls: ['./client-list.component.css']
})

export class ClientListComponent implements OnInit {
  public clientList: Client[];

  constructor(private clientsShareService: ClientsShareService) {

    this.clientsShareService.getSubject().subscribe(clients => {
      this.clientList = clients;
      console.log(clients);
    });
  }

  ngOnInit() {
  }

}