Передача Observable другому компоненту в Angular
У меня есть два компонента 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>
Детали-Виев ТП Компонент
@Input()
resouces$: Observable<DetailsResponse[]>
Мой вопрос заключается в том, как подписаться и получить данные из resources$, наблюдаемые в компоненте просмотра деталей. Подписка на этот объект возвращает ошибку "resources$ не является функцией, подписка на которую невозможна"
как сказал Влад, вы передаете функцию вместо наблюдаемой. В вашем случае вам нужно вызвать эту функцию resources$(), чтобы получить от нее наблюдаемое. ресурсы$().подписаться.
Ответы 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 => {});
}
}
}
Аргументы для getData() известны во втором компоненте, поэтому он не работает.
Определены ли id и type при создании DetailsViewComponent?
Да ,,,,,,,,,,,,
Помимо опечатки в service.getData(), также важно знать, когда входные свойства доступны для привязки. Входные данные не устанавливаются в конструкторе, они доступны в хуке жизненного цикла ngOnChanges каждый раз при изменении входных данных. или в ngOnInit, если вы хотите привязать только в первый раз, когда он получен.
Типография не совпадает. 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.info(results);
})
}
Предполагая, что это не опечатка:
this.res$ = service.getDataпросто передает определение функции. Если вам действительно нужна наблюдаемая, вам нужно выполнить функциюthis.res$ = service.getData(). В качестве альтернативы, если вы действительно хотите передать определение функции, то ваш ввод дляresource$неверен, и он должен(id: number, type: string) => Observable<DetailsResponse[]>соответствоватьres$из родительского компонента.