Question

我不确定这是否是实现此目的的最佳方式。如果您有其他意见，请分享。

我必须实施一个多收件箱系统，用户可以根据不同的收件箱分组多封电子邮件。

例如：http://localhost/inbox/personal/会在personal收件箱中显示电子邮件列表，http://localhost/inbox/business/3会在business收件箱中显示电子邮件列表，并会突出显示ID为的电子邮件： 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 
    )
  }

您可以根据自己的需要进行调整。参数？亮点：NoHighlight。

Answer 2

  subscription:any;
  constructor(
    private route: ActivatedRoute,

  ) { }

  ngOnInit(): void {

    this.subscription = this.route.url.subscribe((url:any) => {
      this.route.firstChild?.params.subscribe((uri:any) => {
        this.selectedID = uri.id;
        this.subscription?.unsubscribe();
      });
    });

  }

ActivatedRoute订阅第一个子参数观察者

2 个答案: