Question

我已经通过链接How to get param from url in angular 4?，并尝试遵循相同的方法。

我正在使用 Angular 7 和我当前的网址：http://localhost:4200/student-details/488

当我单击其他“侧窗格”链接时，我想获取值488并将该值传递给其他组件。

我在下面的页面路由到的ngOnit（）中使用了

this.route.paramMap.subscribe(params => {
   console.log('params', params);
});

Answer 1

假设您的路由模块具有以下类似内容-

{
    path: 'student-details/:id',
    component: StudentDetailsComponent,
}

您可以从488获得:id（student-details/488）属性，例如-

this.route.paramMap.subscribe(params => {
   let id = params.get('id');
   // let id = +params.get('id'); //<--- if you want to convert it into a numeric value
   console.log('Student Id', id);
});

Answer 2

我正在使用角度8

我要路由的组件

this.router.navigate(['/ledger-card'], { queryParams: { branchId: '10', loanAcc: '2738'}});

我要接收路由数据的组件

const param = this.route.snapshot.queryParamMap;
    if  (param.get('branchId')) {
      const branchId =  param.get('branchId');
      const loanAcc = param.get('loanAcc');
    }

**确保您导入ActivatedRoute

import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {}

Answer 3

路由模块：

  ...
  {
    path: '',
    component: YourListComponent
  },
  {                                  // 
    path: ':id',                     // <-- 
    component: YourSingleComponent   // <-- 
  }                                  // 
  ...

yoursingle.component.ts

...

import { ActivatedRoute } from '@angular/router';
...

export class YourSingleComponent implements OnInit {
    ...

    singleID: number;
    ...

    constructor(
        private _route: ActivatedRoute,
    ) {
    }

    ngOnInit() {
        this.singleID = parseInt(this._route.snapshot.paramMap.get("id"));
    }

    ...
}

Angular 7-从网址获取参数值

3 个答案: