ActivatedRoute подписаться на первый дочерний наблюдатель параметров

Question

Я не уверен, что это лучший способ реализовать это. Если у вас есть другие мнения, пожалуйста, поделитесь.

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

Например: http://localhost/inbox/personal/ покажет список писем в personal Входящие, http://localhost/inbox/business/3 покажет список писем в business Входящие и выделит письмо с идентификатором: 3

Маршруты выглядят так:

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'personal' // redirect to personal inbox
  },
  {
    path: ':inbox',
    component: InboxContentComponent, // list of emails in :inbox
    children: [
      {
        path: '',
        component: InboxNoSelectedEmailComponent, // no email selected
      },
      {
        path: ':id',
        component: InboxSelectedEmailComponent, // show selected email content
      }
    ]
  }
];

Моя проблема с InboxContentComponent, Мне нужно определить, когда меняется входящий почтовый ящик и выбрано ли электронное письмо или нет

  constructor(private route: ActivatedRoute) {
  }
  ngOnInit() {
    this.route.paramMap.subscribe(inbox => {
      console.log('inbox', inbox);
    });
  }

События генерируются только при изменении входящих сообщений, а не при изменении электронной почты. Есть ли способ определить, когда изменяются параметры дочернего маршрута?

Делая это this.route.firstChild.paramMap.subscribe(); работает только если при инициализации компонента у маршрута есть первый дочерний элемент. если маршрут такой http://localhost/inbox/business/ затем this.route.firstChild является null

На решение я мог бы подумать, чтобы определить маршруты, как это

{
    path: ':inbox/:id',
    component: InboxContentComponent
}

а затем проверить InboxContentComponent если :id установлен или нет

Есть идеи?

Answer 1

Чтобы решить эту проблему, я слушал события маршрутизатора и получал то, что хотел. Что-то вроде этого:

import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { filter, map, mergeMap, tap } from 'rxjs/operators';

// ...
constructor(
    // ...
    private activatedRoute: ActivatedRoute,
    private router: Router
  ) {
    this.router.events
    .pipe(
      filter((event) => event instanceof NavigationEnd),
      map(() => this.activatedRoute),
      map((route) => {
        while (route.firstChild) route = route.firstChild;
        return route;
      }),
      mergeMap((route) => route.paramMap),
      tap(
        paramMap => console.log('ParamMap', paramMap)
      )
    ).subscribe(
      (paramAsMap) => // Get the params (paramAsMap.params) and use them to highlight or everything that meet your need 
    )
  }

Вы можете адаптировать это к вашим потребностям. Параметры? Подсветка: нет подсветки.