Передача наблюдаемого в другой компонент в Angular

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

Детализация-просмотр HTML

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

Detalis-Viev TS Component

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

MyВопрос в том, как подписаться и получить данные из resources$, наблюдаемые в компоненте представления detalis.Подписка на этот объект приводит к ошибке "ресурсы $ не является подпиской, не может подписаться"

Answer 1

Помимо опечатки на service.getData(), также важно знать, когда входные свойства доступны для привязки. Входные данные не устанавливаются в конструкторе, они доступны в хуке жизненного цикла ngOnChanges каждый раз, когда изменяется вход. или в ngOnInit, если вы хотите связать только при первом получении.

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

Answer 2

Набор текста не совпадает. 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);
    })
}

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

}