parameters未接收参数

Question

navbar.component.html

<a *ngFor="let item of studentClasses" routerLink="/classes/all-courses/, {queryParams: {prop: item.className}}">

class-routing.module.ts

export const routes: Routes = [
  {
    path: 'all-courses/:className',
    component: AllCoursesComponent
  },
]

all-courses.component.ts

ngOnInit() {
    this.activeRoute.queryParams.subscribe(queryParam => {
      console.log(queryParam);
      // here I'm receving empty object. But I'm expecting to receive className
    });
}

Answer 1

You can set query params and fragment as follows:

`<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}">
  link to user component
</a>`


RouterLink will use these to generate this link: 

`/user/bob?debug=true`


  `constructor(private route: ActivatedRoute){}`

  `ngOnInit(){
      this.route.queryParamMap
                .map((params: Params) => params.params)
                .subscribe( (params) => {
                     if(params && params['test']){
                        let testQueryParamVal = params['test'];
                     }
                 });
  }`

Answer 2

导入组件中的ActivatdeRoute和路由器模块，并将它们注入构造函数中

import { ActivatedRoute, Router } from '@angular/router'

contructor(private route: ActivatedRoute, private router: Router){ ... }
Subscribe the ActivateRoute to the ngOnInit

ngOnInit() {

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

    })
}