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 == ) {
return new Product("pingguo7", );
}
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路由的更多相关文章

  1. Angular 4 路由介绍

    Angular 4 路由 1. 创建工程 ng new router --routing 2. 创建home和product组件 ng g component home ng g component ...

  2. angular -- ng-ui-route路由及其传递参数?script标签版

    考虑到 多视图等因素,所以 angular 的路由考虑使用 ng-ui-route来做,而不使用 ng-route来做! <!DOCTYPE html> <html lang=&qu ...

  3. angular 之路由

    1.用angular-cli建一个工程自带路由怎么做? 命令:ng new  项目名 --routing 2.怎么使用路由器和路由器的一些基本使用. //html页面 <a routerLink ...

  4. angular 前端路由不生效解决方案

    angular 前端路由不生效解决方案 Intro 最近使用 Angular 为我的活动室预约项目开发一个前后端分离的客户端,在部署上遇到了一个问题,前端路由不生效,这里记录一下.本地开发正常,但是部 ...

  5. Angular配置路由以及动态路由取值传值跳转

    Angular配置路由 1.找到 app-routing.module.ts 配置路由 引入组件 import { HomeComponent } from './home/home.componen ...

  6. 理解 angular 的路由功能

    相信很多人使用angular 都是因为他路由功能而用的 深入理解ANGULARUI路由_UI-ROUTER 最近在用 ionic写个webapp 看到几个demo中路由有好几种,搞的有点晕,查下资料研 ...

  7. [转]angular的路由机制

    在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而a ...

  8. angular的路由

    AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 下面 ...

  9. angular中路由的实现(针对新手)

    最近搜了一下网上的教程,看完总感觉有点糊涂,对于新手来说可能云里雾里,所以写一个最简单的路由来给大家做个指引. 首先当然需要准备angular,下载地址:https://angular.io/ 现在a ...

随机推荐

  1. java内存基础(一)

    博客园 闪存 首页 新随笔 联系 管理 订阅 随笔- 35  文章- 0  评论- 29  关于Java 数组内存分配一点认识  //总结:[ 数组引用变量存储在栈内存中,数组对象存储在堆内存当中.数 ...

  2. php中的continue用法

    continue 2 表示跳出两层 continue 默认跳出一层 if (count($content_arr) > 0 ) { // 获取相应的goods数据 $goodsdata = ar ...

  3. mysql 启动卡主,cpu 100%

    [mysql@mysqlhq scripts]$ cat /etc/redhat-release Kylin Linux release 3.3.1707 (Core) mysql version S ...

  4. [置顶] STM32 输入捕获的脉冲宽度及频率计算

    输入捕获模式可以用来测量脉冲宽度或者测量频率.STM32 的定时器,除了 TIM6 和 TIM7,其他定时器都有输入捕获功能.以下是对脉冲宽度及频率的计算. 1.脉冲宽度 如下图所示,采集该高电平脉冲 ...

  5. SQL语句替换字段内容例子

    SELECT REPLACE(SysFuncID,'7201','7204') ,           CASE           WHEN Flag=1 THEN REPLACE(funcname ...

  6. day6心得

    面向对象编程介绍 为什么要用面向对象进行开发? 面向对象的特性:封装.继承.多态 类.方法.     引子 你现在是一家游戏公司的开发人员,现在需要你开发一款叫做<人狗大战>的游戏,你就思 ...

  7. Django Rest Framework 3

    目录 一.版本 二.解析器 三.序列化 四.请求数据验证 一.版本 程序也来越大时,可能通过版本不同做不同的处理 没用rest_framework之前,我们可以通过以下这样的方式去获取. 1 clas ...

  8. nginx反向代理负载均衡初次配置

    反向代理,我个人理解是通过一台反向代理服务器,把客户端的把有请求按照一定的规则分发给后台的服务器.nginx作反向代理服务器的虚拟机配置如下: upstream itest { #正常情况下应该作如下 ...

  9. Linux日志文件查看和搜查命令(错误日志排查定位)

    一.cat命令 cat 命令用于连接文件并打印到标准输出设备上,主要用来查看文件内容,创建文件,文件合并,追加文件内容等功能. 语法格式 cat [-AbeEnstTuv] fileName 参数说明 ...

  10. BurpSuite系列(十一)----Project options模块(项目选择)

    一.简介 Project options主要用来对Project的一些设置. 二.模块说明 Project options主要由五个模块组成: 1.Connections 连接2.HTTP3.SSL4 ...