从 url Angular 获取查询参数

Question

我想从 url

http://localhost:4200/courses/5a0eb3d7f6b50c2589c34e57

获取 id 所以在我的 app.module.ts 我有这样的路线

{path:'courses/:id', component:CourseComponent, canActivate:[AuthGuard]}

在我的 course.component.ts 我有以下代码：

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

@Component({
  selector: 'app-course',
  templateUrl: './course.component.html',
  styleUrls: ['./course.component.css']
})
export class CourseComponent implements OnInit {

  id: String;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.id = this.route.snapshot.queryParams["id"];
    console.log(this.id)
  }

}

实际上在我的开发者控制台中我可以看到以下如果我尝试 console.log(params) 我会关注

Answer 1

这是一个路由参数，您应该使用参数属性

this.id = this.route.snapshot.params["id"];

Answer 2

你应该使用 rxjs。

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

更好，因为 .params 可能很快就会被贬低：

this.route.paramMap.subscribe(paramMap => paramMap.get('id'));

一切都在文档中...https://angular.io/guide/router#parammap-api

从 url Angular 获取查询参数

getting query params from url Angular

node.js

routeparams

angular