将 Observable 传递给 Angular 中的另一个组件

Question

我有两个组件details 和details-view。

在 details 中，我必须将 @Input() 的 obserwable 传递给第二个组件。

详细信息组件

 res$: (id: number, type: string) => Observable<DetailsResponse[]>;
 constructor(private service: Service) {
  this.res$ = service.getData;
 }

服务

 getData(id: number, type: string): Observable<DetailsResponse[]>{
   const params = new HttpParams().append('typename', type);
   return this.http.get<any>('api/id', {params: params});
 }

Details-查看 HTML

<dwtalis-view [resources$]="res$"></dwtalis-view>

Detalis-Viev TS 组件

@Input()
resouces$: Observable<DetailsResponse[]>

我的问题是如何在 detalis 视图组件中从 resources$ observable 订阅和获取数据。订阅此对象返回错误“resources$ is not a finction can not subscribe”

Answer 1

除了service.getData() 的错字之外，了解何时可以绑定输入属性也很重要。输入没有在构造函数中设置，它们在每次输入更改时都可以在ngOnChanges 生命周期挂钩中使用。或ngOnInit，如果您只想在第一次收到时绑定。

https://angular.io/guide/lifecycle-hooks

Answer 2

键入不匹配。 res$ 是一个函数(id: number, type: string) => Observable<DetailsResponse[]>，但resouces$ 是一个可观察的Observable<DetailsResponse[]>；

根据您的 cmets，您需要传递一个函数，因为参数在父组件中不可用。所以，你需要接受一个函数为@Input，然后在子组件中执行。

子组件

@Input()
resouces$: (id: number, type: string) => Observable<DetailsResponse[]>;

// Use ngOnInit since @Input properties are populated at this time
ngOnInit() {
    // Example arguments
    this.resouces$(this.id, this.type).subscribe(results => {
        // Do whatever you need to do with the results
        console.log(results);
    })
}

Answer 3

您可以像下面的代码一样更改DetailsViewComponent

export class DetailsViewComponent implements OnInit, OnChanges {

  @Input() resouces$: (id: number, type: string) => Observable<DetailsResponse[]>;

  constructor(
  ) {}

  ngOnInit() {
  }

  ngOnChanges(data) {
    if (data.resouces$ && this.resouces$) {
      this.resouces$(this.id, this.type).subscibe(res => {});
    }
  }

}