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

Question

我正在尝试共享我的服务提供商通过 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 = ?????????
  }

}

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

Answer 1

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

export class TablesComponent implements OnInit  {

  constructor() { }

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

  ngOnInit(): void { }
}

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

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

编辑：根据下面的评论

将您的 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']);
    });
  }
}

然后在您的 parent 和 child 控制器中，订阅 premiumsO，例如：

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().        
    }
}

在 parent 中做同样的事情。不确定这是否是正确的解决方案，但我会这样做。

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

Angular 6 http + Observable + Subject across multiple components

get

http

subscribe

observable

angular