Ниже представлена структура моего модуля:
- Albums-List
- Other Module
- Component 1 Landing
- Component 2 in child route
Второй компонент отображает список альбомов
Компонент списка альбомов
I есть компонент, который получает параметры маршрута для передачи в службу для возврата запроса.
albums$: Observable<Folder[]>;
@Output() parent_id = new EventEmitter<string>();
---
queryAndSubscribe(){
this.albums$ = this._activatedRoute.params.pipe(
tap (params => {
this.parent_id.emit(params.parentID);
}),
switchMap(params => {
return this.albumsService.getAlbums(params.parentID);
})
);
this._subscription = this.albums$.subscribe(albums => {
this.albumsArray = albums;
});
}
Служба
Функция в компоненте списка альбомов вызывает этот запрос в сервисе и возвращает результат.
public getAlbums( parentID: string): Observable<Album[]> {
return this.afs.collection<any>(`parent/${parentID}/albums`)
.valueChanges({ idField: 'id'})
.pipe(shareReplay());
}
Все вышеперечисленное работает нормально, и мой компонент может корректно отображать список альбомов, а вывод parent_id
обновляется нормально.
Реальная проблема теперь возникает, когда у меня есть другой компонент (редактирование компонента 2), который также должен отображать компонент списка альбомов. Этот компонент является дочерним по отношению к другому.
Родительский модуль компонента 2
const routes: Routes = [
{
path: '',
component: LandingComponent,
children: [
{
path: 'edit',
loadChildren: () => import('editor.module').then(mod => mod.EditorModule),
},
]
}
]
Компонент 2 - редактирование. html
<app-album-list (parent_id)="updateParentID($event)"></app-album-list>
На этом вложенном этапе Компонент 2 вообще не отображает ни одного из альбомов, и я считаю, что это потому, что params.parentID
не определен, поэтому не может правильно запрашивать базу данных и что-либо возвращать. Как вы можете видеть выше, я попытался передать parentID в вывод. Но я думаю, что из-за расположения компонента 2 активированный маршрут не совпадает.
Есть идеи, как заставить list-component
возвращать результаты в дочерних компонентах?
В качестве теста, Я изменил запрос к альбомам следующим образом:
this.albums$ = this._activatedRoute.parent.parent.params.pipe(
и, конечно же, альбомы отображаем в компоненте 2. Однако не существует жизнеспособного решения, позволяющего повторно использовать компонент списка альбомов в любом месте приложения. .