Question

我有两个成分details和details-view。

在details中，我必须将@Input()的令人讨厌的内容传递到第二部分。

详细信息组件

 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});
 }

Detalis-View HTML

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

Detalis-Viev TS组件

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

我的问题是如何从detalis视图组件中观察到的resources$订阅并获取数据。订阅此对象会重试错误“ resources $不是功能不能订阅”

Answer 1

您可以像以下代码一样更改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 => {});
    }
  }

}

Answer 2

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

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

Answer 3

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

根据您的评论，您需要传递一个函数，因为参数在父组件中不可用。因此，您需要接受一个@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);
    })
}

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

3 个答案: