angular - hur man hämtar routparametrar i angular2 RC5

Jag har uppgraderat mitt angular2-projekt till RC5 med angular-cli@webpack.

Jag har tillhandahållit routning enligt nedan:

const appRoutes: Routes = [
    { path: 'project-manager', component: ProjectManagerComponent },  
    { path: 'designer/:id', component:DesignerComponent } ,
    {path: '',redirectTo: '/project-manager',pathMatch: 'full'} 
];

och jag omdirigerar till designerkomponenten med routerLink som:

<a [routerLink]="['/designer', page._id]"><i class="fa fa-eye fa-fw"></i></a>

Nu omdirigeras det framgångsrikt och jag kan se parametervärdet i adressfältet i webbläsaren.

Nu vill jag veta, hur kan jag få tillgång till denna parameter i DesignerComponent i angular2 RC5.

Svar #1

Jag tror att du behöver använda ActivatedRoute från routern för att manipulera din parameter.

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

...

constructor(private route: ActivatedRoute, ...) {
}

// TODO :: Add type
value: any;  // -> wanted parameter (use your object type)

ngOnInit() {
    // get URL parameters
    this.route.params.subscribe(params => {
      this.value = params.id; // --> Name must match wanted parameter
    });
}

Glöm inte att importera OnInit från @angular/core om du också behöver det.

Obs : Du kan också använda this.route.snapshot.params för att komma åt det synkront.

REDIGERAD :

  • Rensning för att undvika prenumeration eftersom NG2-router hanterar sina prenumerationer på egen hand.
  • Undvik att använda privata variabler som kan användas i HTML för att undvika att bryta AOT-kompilering.
  • Rensade ROUTER_DIRECTIVES eftersom det är föråldrat.
  • Undvik att använda strängliteral: params['id'] => params.id
  • Ange din parameter med TypeScript om du har det

Svar #2

Importera först ActivatedRoute från @angular/router.

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

åtkomst till det konstruktorn som nedan :

constructor(private route: ActivatedRoute){            
}

prenumerera på params-ändring inuti ngOnInit enligt nedan :

ngOnInit() {
  this.route.params.subscribe(params => {
    if (params['id']) {
    }
  });
}

Relaterade artiklar