1

我想创建一个订阅 Angular 的 paramMap 更改的服务。不幸的是，这似乎不起作用。

export class LocationResourcesService {

  constructor(private activatedRoute: ActivatedRoute) {

    this.activatedRoute.paramMap.pipe(
      map((params: ParamMap) => params.get('account-id')),
    ).subscribe((newValue) => console.log(newValue))
  }
  // ----------
}

上面的订阅只发出一个值——当 Angular 首次加载到页面中时。而那个值是null。当它被放置在页面中活动的组件的构造函数中时，相同的订阅会发生。大概是因为路线已加载并且ActivatedRoute已设置。

我会假设 ActivatedRoute 是一个单例服务，因此我可以订阅它的更改。显然情况并非如此，那么该服务如何订阅 的值activatedRoute.ParamMap？

4

1 回答 1

0

不幸的是，对此没有简单的答案。我不打算重现整个讨论，但可以在这里看到解决方案：https ://github.com/angular/angular/issues/11023#issuecomment-399667101 。

我正在复制它，以便轻松感受它。正如我所说，这并不简单：

import { Injectable } from '@angular/core';
import { ActivatedRoute, Router, NavigationEnd, Params } from '@angular/router';
import { filter, switchMap } from 'rxjs/operators'
import { of, Observable } from 'rxjs'

@Injectable()
export class MiscService {

  params$: Observable<Params>

  constructor( private router: Router,
              private route: ActivatedRoute) {

    // Create an observable representing the params
    this.params$ = this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      switchMap(() => {
        const params = this.route.firstChild?.params
        // return params or an empty observable 
        return params || of()
      })
    )
    
    // subscribe to the params$ observable - can be done for 
    // multiple observers
    this.params$.subscribe((params) => {
      console.log('params', params)
    })
  }

}
于 2020-12-17T11:50:29.570 回答