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 == ) {
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路由的更多相关文章
- Angular 4 路由介绍
Angular 4 路由 1. 创建工程 ng new router --routing 2. 创建home和product组件 ng g component home ng g component ...
- angular -- ng-ui-route路由及其传递参数?script标签版
考虑到 多视图等因素,所以 angular 的路由考虑使用 ng-ui-route来做,而不使用 ng-route来做! <!DOCTYPE html> <html lang=&qu ...
- angular 之路由
1.用angular-cli建一个工程自带路由怎么做? 命令:ng new 项目名 --routing 2.怎么使用路由器和路由器的一些基本使用. //html页面 <a routerLink ...
- angular 前端路由不生效解决方案
angular 前端路由不生效解决方案 Intro 最近使用 Angular 为我的活动室预约项目开发一个前后端分离的客户端,在部署上遇到了一个问题,前端路由不生效,这里记录一下.本地开发正常,但是部 ...
- Angular配置路由以及动态路由取值传值跳转
Angular配置路由 1.找到 app-routing.module.ts 配置路由 引入组件 import { HomeComponent } from './home/home.componen ...
- 理解 angular 的路由功能
相信很多人使用angular 都是因为他路由功能而用的 深入理解ANGULARUI路由_UI-ROUTER 最近在用 ionic写个webapp 看到几个demo中路由有好几种,搞的有点晕,查下资料研 ...
- [转]angular的路由机制
在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而a ...
- angular的路由
AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 下面 ...
- angular中路由的实现(针对新手)
最近搜了一下网上的教程,看完总感觉有点糊涂,对于新手来说可能云里雾里,所以写一个最简单的路由来给大家做个指引. 首先当然需要准备angular,下载地址:https://angular.io/ 现在a ...
随机推荐
- 微服务监控之二:Metrics+influxdb+grafana构建监控平台
系统开发到一定的阶段,线上的机器越来越多,就需要一些监控了,除了服务器的监控,业务方面也需要一些监控服务.Metrics作为一款监控指标的度量类库,提供了许多工具帮助开发者来完成自定义的监控工作. 使 ...
- 在rac集群上开启OEM
由于安装rac的时候没有开启oem,这里开启oem,方便管理 [oracle@rac01 ~]$ emca -config dbcontrol db -repos create -cluster ST ...
- git学习2 - 安装
msysgit是Windows版的Git,从https://git-for-windows.github.io下载(网速慢的同学请移步国内镜像),然后按默认选项安装即可. 安装完成后,在开始菜单里找到 ...
- WP8.1通过StreamSocket连接C++服务器
注:当服务端和手机模拟器运行在一台机器时,会有奇怪错误.将服务端放在其它机器上更改客户端连接地址,运行正常.或者直接用本机modern调试也可以. 实例化一个对象 StreamSocket clien ...
- Angular2快速入门-3.多个组件(分离新闻列表页和详细页)
上篇(Angular2快速入门-2.创建一个新闻列表)已经完成新闻列表的展示,并且点击新闻列表的时候,下面可以展示出新闻的详细信息,这节我们把新闻详细和新闻列表页面分离出来 新闻详细单独一个compo ...
- java成神之——数值操作BigDecimal,BigInteger,Random,SecureRandom
数值操作 数值新特性 包装类 浮点 BigDecimal BigInteger 数值本地化 随机数 假随机数 真随机数 播种 结语 数值操作 数值新特性 123_456 等价于 123456,增加可读 ...
- mysql int类型范围
int范围 Type Bytes Minimum Value Maximum Value (Signed/Unsigned) (Signed/Unsigned) TINYINT 1 -128 ...
- Python函数的进阶
一 函数的动态参数 *agrs 位置参数动态传参 *args 接收多个位置参数 def func(*args): print(args) func("女儿国","西 ...
- wordpress Bloginfo()函数
bloinfo($show); ‘name‘ – 显示在 设置 > 常规 中设置的“站点标题”. 该数据是从 wp_options 这个数据表中检索到的 "blogname" ...
- GBK/ UTF-8/ UNICODE(字符编码)
在python2中:如果执行程序,在编译器中,因为默认的编码是ASCII码(英文),所以如果输入中文就会出现乱码,因此为了避免这种乱码的情况发生,在输入中文字符串之后,必须进行手动转码,将GBK/ U ...