守护路由

1. app-routing

const routes: Routes = [ {path: '', redirectTo: '/home',pathMatch:'full'}, {path: 'home', component:HomeComponent}, {path: 'chat', component:ChatComponent, outlet:'talkroom'}, {path: 'product/:id', component:ProductComponent,children:[ {path: '', component:ProductDescComponent}, {path: 'sellerID/:id', component:SellerInfoComponent} ], canActivate : [LoginGuard], canDeactivate : [UnSaveGuard]}, {path: '**', component:Code404Component}, ];

2.login.guard.ts

import {ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree} from '@angular/router'; import {Observable} from 'rxjs'; export class LoginGuard implements CanActivate { canActivate() { let loggedIn : boolean = Math.random() < 0.5; if(!loggedIn){ console.log("用户未登陆"); } return loggedIn; } }

3.unsave.guard.ts

import {ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot, UrlTree} from '@angular/router'; import {Observable} from 'rxjs'; import {ProductComponent} from '../product/product.component'; export class UnSaveGuard implements CanDeactivate<ProductComponent> { // tslint:disable-next-line:typedef canDeactivate(component: ProductComponent){ return window.confirm("您还未保存,确定要离开吗？"); } }