I have upgraded my angular2 project to RC5
using angular-cli@webpack
.
I have provide routing as below:
const appRoutes: Routes = [
{ path: 'project-manager', component: ProjectManagerComponent },
{ path: 'designer/:id', component:DesignerComponent } ,
{path: '',redirectTo: '/project-manager',pathMatch: 'full'}
];
and I am redirecting to designer Component using routerLink as :
<a [routerLink]="['/designer', page._id]"><i class="fa fa-eye fa-fw"></i></a>
Now It is getting redirected successfully and I am able to see param value in address bar of the browser.
Now I want to know , How can I access this parameter in DesignerComponent in angular2 RC5.
I believe you need to use the ActivatedRoute from the router to manipulate your 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
});
}
Don't forget to import OnInit
from @angular/core
if you need it as well.
N.B : You can also use this.route.snapshot.params
to access it synchronously.
EDITED :
ROUTER_DIRECTIVES
because it's deprecated.First import ActivatedRoute
from @angular/router
.
import { ActivatedRoute } from '@angular/router';
access it constructor as below :
constructor(private route: ActivatedRoute){
}
subscribe to params change inside ngOnInit as below :
ngOnInit() {
this.route.params.subscribe(params => {
if (params['id']) {
}
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With