码迷,mamicode.com
首页 > 其他好文 > 详细

angular resolve路由

时间:2018-04-21 23:38:44      阅读:581      评论:0      收藏:0      [点我收藏+]

标签:str   outer   ini   tin   class   else   fine   rect   路由   

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) { }
}

 

angular resolve路由

标签:str   outer   ini   tin   class   else   fine   rect   路由   

原文地址:https://www.cnblogs.com/chenyishi/p/8904172.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!