javascript - 如何将参数映射作为可观察对象？

Question

如何将参数映射作为可观察的（即每当路由/参数发生变化时反应。

这是我的实现。

但它没有返回任何可观察的值。

不知道为什么！

id$: Observable<string>

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


ngOnInit() {
    this.id$ = this.router.events.pipe(
      filter((e) => e && e instanceof NavigationEnd),
      map(() => this.route.snapshot.paramMap.get('id')),
    );
}

并在模板内{{ id$ | async }}- >我没有收到这个。但是当我做 a 时subscribe(console.log)，我看到了价值。

请注意，我不想做这样的事情：因为我希望它是可观察的，所以更改是反应性的。

以下仅在最初路由时有效。

并且一旦发生任何变化就不要工作。

所以我不想要下面的实现，想要上面提到的东西。

id: string
  constructor(
    private router: Router,
    private route: ActivatedRoute,
  ) {
this.id = this.route.snapshot.paramMap.get('id'))
}

Answer 1

你可以使用params和subscription

this.route.params.subscribe(params => console.log(params.id));

Answer 2

关于收听的评论paramMap是正确的，但您还需要将行更改this.route.snapshot.paramMap.get('id')为：

this.id$ = this.route.paramMap.pipe(
  map(params => params.get('id'))
)

Answer 3

• 如果您想要单个项目使用this.activatedRouteSnapshot.paramMap.get(id)
• 如果你想要一个流项目使用this.activatedRoute.paramMap.pipe(map(paramMap => paramMap.get(id)))

注意第一个是ActivatedRouteSnapshot，第二个是ActivatedRoute