Angular 6 http + Observable + Subject 跨多个组件答案

【问题标题】：Angular 6 http + Observable + Subject across multiple componentsAngular 6 http + Observable + Subject 跨多个组件
【发布时间】：2018-12-14 10:05:59
【问题描述】：

我正在尝试共享我的服务提供商通过 HTTP GET 检索到的数据。我在http.service 中获取数据：

@Injectable()
export class HttpService {

  constructor(private http: HttpClient) { }

  public getData4(url: string): Observable<Premium[]> {
    return this.http.get<Premium[]>(url);
  }
}

app的路由是：

<TabsComponent>
  <TablesComponent> 
  <TablesComponent/>
</TabsComponent>

在 tabs.component.ts 我有：

 export class TabsComponent implements OnInit {

  myUrl4All = 'http://localhost:8083/RCCT-2.0-SNAPSHOT/rest/v2';
  premiumsO: Premium[] = [];

  constructor(private httpService: HttpService, private entity1Service: Entity1Service) { }

  ngOnInit() {
    this.httpService.getData4(this.myUrl4All).subscribe(data => this.premiumsO = 
    data['premiumList']);
  }
}

在我的 tabs.component.html 我有：

<div>
<app-tables-component></app-tables-component>
</div>

还有我的 tables.component.ts：

export class TablesComponent implements OnInit  {

  constructor() { }

  returnedArray: Premium[] = [];

  ngOnInit(): void {

    this.returnedArray = ?????????
  }

}

我的问题是：现在我有一个带有 observable 的 http.service，但我想通过使用订阅在我的 tables.component 中捕获和显示来自 http 的数据。我应该如何更改我的代码来做到这一点？

【问题讨论】：

如果您的TabsComponent 是父级而TablesComponent 是子级，那么您可以使用@Input
angular.io/guide/component-interaction。另请注意，您的代码没有意义。该服务声称 observable 发出的事件属于 Premium[] 类型，并且在您的组件中，您使用的是 data['premiumList']。数组没有 premiumList 属性。
对于 - JB Nizet - 我从 Java 中以 JSON 格式接收对象列表。 premiumList - 我的 JSON 中的主要“包装器”。所以，现在编码它运行良好！
它运行良好，但它是错误的。你说它返回 Observable<Premium[]> 是在撒谎，因为实际返回的类型是 Observable<{premiumList: Premium[]}>

标签： angular http get observable subscribe

【解决方案1】：

一种简单快捷的方法是让您在子组件上使用 @Input（记得从 @angular/core 导入），如下所示：

export class TablesComponent implements OnInit  {

  constructor() { }

  @Input()
  returnedArray: Premium[] = [];

  ngOnInit(): void { }
}

然后在您的父母template.html 上传递父母数据，如下所示：

<div>
    <app-tables-component [returnedArray]="premiumsO"></app-tables-component>
</div>

编辑：根据下面的 cmets

将您的Array 添加到您的服务中，使其成为可观察的并订阅它。喜欢：

@Injectable()
export class HttpService {
  premiumsO: BehaviorSubject<Premium[]> = new BehaviorSubject<Premium[]>();

  constructor(private http: HttpClient) { }

  public getData4(url: string): void {
    this.http.get<Premium[]>(url).subscribe(data => {
        this.premiumsO.next(data['premiumList']);
    });
  }
}

然后在您的父控制器和子控制器中，订阅premiumsO like：

export class TablesComponent implements OnInit  {

  constructor(private httpService: HttpService) { }
  private subscription: Subscription;
  returnedArray: Premium[] = [];

  ngOnInit(): void {
       this.subscription = this.httpService.premiumsO.subscribe(data => this.returnedArray =  data);
  }
    ngOnDestroy() {
        this.subscription.unsubscribe().        
    }
}

在你的父母身上做同样的事情。不确定这是否是正确的解决方案，但我会这样做。

【讨论】：

谢谢！我走了这条路，但出于学习目的，我想尝试“订阅”版本...您能给我一些关于在我的代码中实现订阅的建议吗？
您可以简单地将订阅从您的tabs.component.ts 移动到您的tables.component.ts 吗？为什么在父组件中需要它？
致 Morema - 好的，这个解决方案很好。呜呜！ 如果我想让用户更改我在 tables.component 中的 Array 并在父组件 (tabs.component) 或另一个子组件中显示其中的一部分怎么办。我该怎么做？
@AntonRomanov 如果你将你的数组移动到你的服务中，让它成为可观察的并在你的两个组件中订阅它呢？我将编辑并添加我的意思
非常感谢！我的问题得到了回答。对不起，愚蠢的问题）