Maybe all other answers are for angular 2.X. Now it doesn’t work for angular 5.X. I’m working with it. with only NavigationEnd, you can not get previous url. because Router works from “NavigationStart”, “RoutesRecognized”,…, to “NavigationEnd”. You can check with router.events.forEach((event) => { console.log(event); }); But still you can not get previous url even with … Read more
<router-outlet [node]=”…”></router-outlet> is just invalid. The component added by the router is added as sibling to <router-outlet> and does not replace it. See also https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service @Injectable() export class NodeService { private node:Subject<Node> = new BehaviorSubject<Node>([]); get node$(){ return this.node.asObservable().filter(node => !!node); } addNode(data:Node) { this.node.next(data); } } @Component({ selector : ‘node-display’, providers: [NodeService], template : … Read more
Update (Angular 6 +) The recommended way to create a singleton service has changed. It is now recommended to specify in the @Injectable decorator on the service that it should be provided in the ‘root’. This makes a lot of sense to me and there’s no need to list all the provided services in your … Read more
Instead of using forRole(), you can do this: { path: ‘super-user-stuff’, component: SuperUserStuffComponent, canActivate: [RoleGuard], data: {roles: [‘SuperAdmin’, …]} } and use this in your RoleGuard canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : Observable<boolean> | Promise<boolean> | boolean { let roles = route.data.roles as Array<string>; … }
You need to import RouterTestingModule when setting up the test module. /* tslint:disable:no-unused-variable */ import { async, ComponentFixture, TestBed } from ‘@angular/core/testing’; import { By } from ‘@angular/platform-browser’; import { DebugElement } from ‘@angular/core’; import { RouterTestingModule } from ‘@angular/router/testing’; import { MyNewComponentComponent } from ‘./my-new-component.component’; describe(‘MyNewComponentComponent’, () => { let component: MyNewComponentComponent; let fixture: … Read more
To also cover guards against browser refreshes, closing the window, etc. (see @ChristopheVidal’s comment to Günter’s answer for details on the issue), I have found it helpful to add the @HostListener decorator to your class’s canDeactivate implementation to listen for the beforeunload window event. When configured correctly, this will guard against both in-app and external … Read more
The code you are showing there is absolutely correct. I suspect that your problem is that you are not importing RouterModule (which is where RouterLink is declared) into the module which uses this template. I had a similar problem and it took me some time to solve as this step is not mentioned in the … Read more
As of RC6 you can do the following to change URL without change state and thereby keeping your route history import {OnInit} from ‘@angular/core’; import {Location} from ‘@angular/common’; // If you dont import this angular will import the wrong “Location” @Component({ selector: ‘example-component’, templateUrl: ‘xxx.html’ }) export class ExampleComponent implements OnInit { constructor( private location: … Read more
Try this: Import RouterModule into your app.module.ts import { RouterModule } from ‘@angular/router’; Add RouterModule into your imports [] like this: imports: [ RouterModule, ]
If you have Angular 5 or above, just change <a href=”” (click)=”passTheSalt()”>Click me</a> into <a [routerLink]=”” (click)=”passTheSalt()”>Click me</a> A link will be displayed with a hand icon when hovering over it and clicking it won’t trigger any route. Note: If you want to keep the query parameters, you should set queryParamsHandling option to preserve: <a … Read more