Question

因此，当我单击某个帖子时，我将其发送到路由器中具有postId的另一个页面：

this.router.navigate(['/annotation', postId]);

这会将我导航到注释页面，在该页面中仅显示该单个帖子。为了使它正常工作，我需要获取postId，它现在位于路由器链接中：

http://localhost:4200/annotation/5b3f83b86633e59b673b4a4f

如何从路由器获取该ID：5b3f83b86633e59b673b4a4f，并将其放入我的TS文件中。我希望此ID仅加载具有该ID的帖子。

任何人都可以向我指出正确的方向，以便能够抓住链接http://localhost:4200/annotation/5b3f83b86633e59b673b4a4f的所有内容，并只获得末尾的ID并将其存储在我的TS文件中。

对不起，我是angular / web开发人员的新手，因此我要问为什么，非常感谢您的宝贵时间。

Answer 1

尝试加载类似以下内容的组件

id: string;
ngOnInit() {
  this.id = this.route.snapshot.paramMap.get('postId');
}

Answer 2

您可以通过观察params来读取已激活路线的参数，对其进行订阅，就可以访问路线参数：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'selector',
  template: ``,
})

export class LoanDetailsPage implements OnInit, OnDestroy {
  private paramsSubscription$: Subscription;

  constructor(private _route: ActivatedRoute) {}

  ngOnInit() {
    this.paramsSubscription$ = this._route.params.subscribe(params => {
       console.log(params); // Full params object
       console.log(params.get('paramName')); // The value of "paramName" parameter
    });
  }

  ngOnDestroy() {
    this.paramsSubscription$.unsubscribe();
  }
}

PS：请不要忘记unsubscribe()生命周期挂钩中的OnDestroy。

Answer 3

您必须注入ActivatedRoute服务并订阅paramMap：

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  // subscribe to the parameters observable
  this.route.paramMap.subscribe(params => {
    this.foo = params.get('paramName');
  });
}

如何获取特定的路由器值？

3 个答案: