I would say using: ngOnInit() { if (this.route.snapshot.queryParams[‘id’]) { //do your stuff. example: console.log(‘id: ‘, this.route.snapshot.queryParams[‘id’]); } } would be sufficient. Don’t forget to initialize private route: ActivatedRoute in constructor and import { ActivatedRoute } from ‘@angular/router’; Since you only need to check if it exists or not. If it does your stuff would occur, … Read more
For me the main difference is that the PathLocationStrategy requires a configuration on the server side to all the paths configured in @RouteConfig to be redirected to the main HTML page of your Angular2 application. Otherwise you will have some 404 errors when trying to reload your application in the browser or try to access … Read more
you can solve it by adding routes const routes: Routes = [ { path: ‘experience’, children: [ { path: ‘pending’, component: ExperienceComponent }, { path: ‘requests’, component: ExperienceComponent }, ] }] and in ExperienceComponent import import { ActivatedRoute } from “@angular/router”; and in constructor add this parameter constructor(public route: ActivatedRoute) and inside constructor get url … Read more
You don’t need to export it. It’s just for convenience. If you add AppRoutingModule to AppModule you also implicitly import RouterModule this way. Otherwise you would need to import it explicitely @NgModule({ imports: [AppRoutingModule, RouterModule], }) export class AppModule {} for example to be able to use <router-outlet> or RouterLink in components declared in AppModule
The page will not refresh, cause that’s how the Router works.. without refreshing the page! You have to subscribe to the route parameters to detect changes in them and then do whatever you want to with that information.. So inject ActivatedRoute into your component and subscribe to the parameters like this: constructor(private route: ActivatedRoute) {} … Read more
For testing we now create a testing module using TestBed. We can use the TestBed#configureTestingModule and pass a metadata object to it the same way we would pass to @NgModule beforeEach(() => { TestBed.configureTestingModule({ imports: [ /* modules to import */ ], providers: [ /* add providers */ ], declarations: [ /* components, directives, and … Read more
This is currently not supported. If only parameter values change but the route stays the same the component is not re-created. See also https://github.com/angular/angular/issues/9811 You can subscribe to params to get notified when the params change to re-initialize the component instance. See also https://stackoverflow.com/a/38560010/217408
Don’t call subscribe() in your service and instead let the route subscribe. Change return this.searchService.searchFields().subscribe(fields => { to import ‘rxjs/add/operator/first’ // in imports return this.searchService.searchFields().map(fields => { … }).first(); This way an Observable is returned instead of a Subscription (which is returned by subscribe()). Currently the router waits for the observable to close. You can … Read more
Based on @angular/router v3-beta, these are the required steps. Implement a resolver that returns an Observable or a plain value: @Injectable() export class HeroResolver implements Resolve { constructor( private service: HeroService ) {} resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Hero> { const id = +route.params[‘id’]; return Observable.fromPromise(this.service.getHero(id)); } } Note that in case you return an observable, … Read more
update (2.0.0 final) (somepath/:someparam/someotherpath) you can subscribe to them using _router.queryParams.subscribe(…): export class HeroComponent implements OnInit { constructor(private _activatedRoute: ActivatedRoute, private _router:Router) { _activatedRoute.queryParams.subscribe( params => console.log(‘queryParams’, params[‘st’])); original If you want queryParams instead of route params (somepath/:someparam/someotherpath) you can subscribe to them using _router.routerState.queryParams.subscribe(…): export class HeroComponent implements OnInit { constructor(private _activatedRoute: ActivatedRoute, private … Read more