如何从 Angular ActivatedRoute 获取参数

Question

我正在尝试使用 observables 从我激活的路由中获取参数 :id。当我在控制台上打印 params 时，我得到了 :id 的正确值。但 this.id 并非如此。我得到了 NaN 的值。你能告诉我问题是什么吗

export class RecipeEditComponent implements OnInit {
  id: number;
  editMode = false;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params.subscribe(
      (params: {id: string}) => {
        this.id = +params.id;
        console.log(this.id);
      }
    );
}
}

Answer 1

我认为以下代码适用于您的情况：

ngOnInit() {
this.heroes$ = this.route.paramMap.pipe(
  switchMap(params => {
    // (+) before `params.get()` turns the string into a number
    this.selectedId = +params.get('id');
    return this.service.getHeroes();
  })
);

}

你也可以试试这个：

this.sessionId = this.route
  .queryParamMap
  .pipe(map(params => params.get('id') || 'None'));

Answer 2

改为this.id = +params.get('id')。

您应该使用方法 get()，因为它 returns 给定参数 id 的单个值。您遇到错误是因为 params 不是以 id 作为值的键。

export class RecipeEditComponent implements OnInit {
  id: number;
  editMode = false;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
  // paramMap replaces params in Angular v4+
   this.route.paramMap.subscribe(params: ParamMap => {
        this.id = +params.get('id');
        console.log(this.id);     
  });
}

Answer 3

像这样检索参数：

  ngOnInit() {
this.route.params.subscribe(
  (params: Params) => {
    this.id = +params["id"];
    console.log(this.id);
  }
);

} }

Answer 4

问题出在路由定义中：放 : 而不是 ::

Answer 5

id: 编号;

构造函数（私有路由：ActivatedRoute）{ }

ngOnInit() {

this.id = this.route.snapshot.params(['id'])

}

如何从 Angular ActivatedRoute 获取参数

How to get parameters from the Angular ActivatedRoute

parameters

routing

angular