0

下面是我的模块结构：

- Albums-List
- Other Module 
  - Component 1 Landing
    - Component 2 in child route

组件二是显示专辑列表

专辑列表组件

我有一个组件，它获取路由参数以传递给服务以返回查询。

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 - Edit.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 中。但是，没有可行的解决方案允许专辑列表组件在应用程序的任何地方可重用。

4

0 回答 0