Below is my module structure:
- Albums-List
- Other Module
- Component 1 Landing
- Component 2 in child route
Component two is displaying the albums list
Albums List Component
I have a component that obtains the route params to pass to a service to return a query.
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;
});
}
Service
The function in the album list component calls this query in the service and returns the result.
public getAlbums( parentID: string): Observable<Album[]> {
return this.afs.collection<any>(`parent/${parentID}/albums`)
.valueChanges({ idField: 'id'})
.pipe(shareReplay());
}
All of the above works fine, and my component can correctly display the list of albums and the parent_id output is updated fine.
The real issue now comes in when I have another component (component 2 edit) that also needs to display the album list component. This component is a child of another.
Component 2 parent module
const routes: Routes = [
{
path: '',
component: LandingComponent,
children: [
{
path: 'edit',
loadChildren: () => import('editor.module').then(mod => mod.EditorModule),
},
]
}
]
Component 2 - Edit.html
<app-album-list (parent_id)="updateParentID($event)"></app-album-list>
At this nested point, Component 2 isn't displaying any of the albums at all and I believe it's because the params.parentID is undefined, therefore not able to query the database correctly and return anything. As you can see above, i tried emitting the parentID into an output. But I think it's due to component 2's positioning that the activated route isn't the same.
Any ideas how to make the list-component return results in child components?
As a test, I modified the albums query to as follows:
this.albums$ = this._activatedRoute.parent.parent.params.pipe( and sure enough the albums display in component 2. However, there isn't a viable solution to allow the albums list component to be reusable anywhere in the app.
