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

问题描述

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

I'm not sure if this is the best way to implement this. If you have other opinions please share.

我必须实现一个多收件箱系统，在该系统中，用户可以将多个电子邮件按不同的收件箱分组.

I have to implement a multi inbox system where the user can have multiple emails grouped by different inboxes.

例如:http://localhost/inbox/personal/将在personal收件箱中显示电子邮件列表，http://localhost/inbox/business/3将在business收件箱中显示电子邮件列表，并突出显示ID为3

For example: http://localhost/inbox/personal/ will show a list of emails in personal inbox, http://localhost/inbox/business/3 will show a list of emails in business inbox and will highlight email with 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.我需要检测收件箱何时更改以及是否选择了电子邮件

My problem is with InboxContentComponent . I need to detect when inbox changes and if an email is selected or not

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

仅当收件箱发生更改时才发出事件，而电子邮件发生更改时才发出事件.有没有办法检测子路由参数何时更改?

Events are emitted only when inbox changes and not when email changes. Is there a way to detect when child route parameters changes?

执行此this.route.firstChild.paramMap.subscribe();仅在组件初始化中路由具有第一个子代的情况下有效.如果路线是这样的http://localhost/inbox/business/，则this.route.firstChild是null

Doing this this.route.firstChild.paramMap.subscribe(); only works if on component initialization the route has a first child. if the route is like this http://localhost/inbox/business/ then this.route.firstChild is null

在解决方案上，我可能认为是定义这样的路线

On solution I could think is to define routes like this

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

，然后检查InboxContentComponent是否已设置:id

and then check in InboxContentComponent if :id is set or not

有什么想法吗?

推荐答案

为解决此类问题，我将收听路由器事件并检索所需的内容.像这样的东西:

To tackle this kind of problem, I would listen to router events and retrieve what I want. Something like this :

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.

You can adapt this to your need. Params ? Highlight : NoHighlight.

这篇关于ActivatedRoute订阅第一个子参数观察器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！