路由守卫

路由守卫

router/src/app/app-routing.module.ts

@@ -6,6 +6,9 @@ import {Code404Component} from "./code404/code404.component";
 import {ProductDescComponent} from "./product-desc/product-desc.component";
 import {SellerInfoComponent} from "./seller-info/seller-info.component";
 import {ChatComponent} from "./chat/chat.component";
+import {LoginGuard} from "./guard/login.guard";
+import {UnSaveGuard} from "./guard/unSave.guard";
+import {ProductResolve} from "./guard/product.guard";
 
 const routes: Routes = [
     {path: '', redirectTo:'/home',pathMatch:'full'},//路由重定向
@@ -14,13 +17,17 @@ const routes: Routes = [
     {path: 'product/:id', component: ProductComponent,children:[
         {path: '', component: ProductDescComponent},
         {path: 'seller/:id', component: SellerInfoComponent},
-    ]},
+    ],resolve:{
+        product:ProductResolve
+    }
+    },
     {path: '**', component: Code404Component},
 ];
 
 @NgModule({
     imports: [RouterModule.forRoot(routes)],
-    exports: [RouterModule]
+    exports: [RouterModule],
+    providers:[LoginGuard,UnSaveGuard,ProductResolve]
 })
 export class AppRoutingModule {
 }

router/src/app/app.component.html

@@ -1,6 +1,6 @@
 <a [routerLink]="['/home']">主页</a>
 <!--<a [routerLink]="['/product']" [queryParams]="{id:1}">商品详情</a>-->
-<a [routerLink]="['/product',2]">商品详情</a>
+<a [routerLink]="['/product',1]">商品详情</a>
 <input type="button" value="商品详情" (click)="toProductDetails()">
 
 <a [routerLink]="[{outlets:{primary:'home', aux:'chat'}}]">开始聊天</a>

router/src/app/guard/login.guard.ts

@@ -0,0 +1,12 @@
+import {CanActivate} from "@angular/router";
+
+export class LoginGuard implements CanActivate {
+    canActivate() {
+        let loggedIn: boolean = Math.random() < 0.5;
+        if (!loggedIn) {
+            console.log("用户未登录");
+        }
+
+        return loggedIn;
+    }
+}

router/src/app/guard/product.guard.ts

@@ -0,0 +1,21 @@
+import {Resolve,ActivatedRouteSnapshot, RouterStateSnapshot,Router} from "@angular/router";
+import {Observable} from "rxjs";
+import {Product} from "../product/product.component";
+import {Injectable} from "@angular/core";
+
+@Injectable()
+export class ProductResolve implements Resolve<Product> {
+
+    constructor(private router:Router){
+
+    }
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Product> | Promise<Product> | Product{
+        let productId: number = route.params["id"];
+        console.log(productId);
+        if (productId == 1) {
+            return new Product(1,"iPhone7");
+        }else {
+            this.router.navigate(['/home']);
+        }
+    }
+}

router/src/app/guard/unSave.guard.ts

@@ -0,0 +1,9 @@
+import {ProductComponent} from "../product/product.component";
+/**
+ * Created by mac on 2018/7/24.
+ */
+export class UnSaveGuard implements CanDeactivate<ProductComponent>{
+    canDeactivate(component:ProductComponent){
+        return window.confirm("你还没有保存，确定要离开嘛？");
+    }
+}

router/src/app/product/product.component.html

@@ -7,6 +7,11 @@
         商品ID是：{{productId}}
     </p>
 
+    <p>
+        商品名称是：{{productName}}
+    </p>
+
+
     <a [routerLink]="['./']">商品描述</a>
     <a [routerLink]="['./seller',99]">销售员信息</a>
     <router-outlet></router-outlet>

router/src/app/product/product.component.ts

@@ -9,6 +9,7 @@ import {ActivatedRoute} from "@angular/router";
 export class ProductComponent implements OnInit {
 
   private productId:number;
+  private productName:string;
 
   constructor(private routeInfo:ActivatedRoute) { }
 
@@ -18,8 +19,21 @@ export class ProductComponent implements OnInit {
     this.routeInfo.params.subscribe(
         (params:Params)=>this.productId = params["id"]
     );
+    this.routeInfo.data.subscribe(
+        (data:{product:Product}) =>{
+          this.productId = data.product.id;
+          this.productName = data.product.name;
+        }
+    );
     //参数快照
     // this.productId = this.routeInfo.snapshot.params["id"];
   }
 
 }
+
+//声明此类
+export class Product{
+  constructor(public id:number,public name:string){
+
+  }
+}