Angular - отображение активированных данных маршрута из импортированного компонента внутри дочернего компонента - PullRequest
0 голосов
/ 24 апреля 2020

Ниже представлена ​​структура моего модуля:

- 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. Однако не существует жизнеспособного решения, позволяющего повторно использовать компонент списка альбомов в любом месте приложения. .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...