zoukankan      html  css  js  c++  java
  • angular resolve路由

    import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from "@angular/router";
    import { Product } from "../product/product.component";
    import { Observable } from "rxjs/Observable";
    import { Injectable } from "@angular/core";
    
    @Injectable()
    export class ProductResolve implements Resolve<Product> {
        constructor(private router: Router) { }
        resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Product | Observable<Product> | Promise<Product> {
            let productId: number = route.params["id"];
            if (productId == 1) {
                return new Product("pingguo7", 1);
            }
            else {
                this.router.navigate(['/home']);
                return undefined;
            }
        }
    }
    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { HomeComponent } from './home/home.component';
    import { ProductComponent } from './product/product.component';
    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 { UnsacedGuard } from './guard/unsaced.guard';
    import { ProductResolve } from './guard/product.resolve';
    
    const routes: Routes = [
      {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
      },
      {
        path: 'chat',
        component: ChatComponent,
        outlet: 'aux'
      },
      {
        path: 'home',
        component: HomeComponent
      },
      {
        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],
      providers: [LoginGuard, UnsacedGuard, ProductResolve]
    })
    export class AppRoutingModule { }
    import { Component, OnInit } from '@angular/core';
    import { ActivatedRoute, Params } from '@angular/router';
    
    @Component({
      selector: 'app-product',
      templateUrl: './product.component.html',
      styleUrls: ['./product.component.css']
    })
    export class ProductComponent implements OnInit {
    
      private productId: number;
      private productName: string;
      constructor(private routeInfo: ActivatedRoute) { }
    
      ngOnInit() {
        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 Name: string, public id: number) { }
    }
  • 相关阅读:
    程序员生存定律--成长路上常见的坑
    程序员生存定律--升华成高手的可能方法
    程序员生存定律--如何尽快变的稍微专业一点
    程序员生存定律--编程的起点与可能的失足
    一段旅程的结束和另一端旅程的开始
    Cesium教程系列汇总
    数据可视化之总结
    可视化之Earth NullSchool
    可视化之AQICN
    可视化之Berkeley Earth
  • 原文地址:https://www.cnblogs.com/chenyishi/p/8904172.html
Copyright © 2011-2022 走看看