路由定位:

modifyUser(user) {
this.router.navigate(['/auction/users', user.id]);
}

路由定义:

{path: 'users/:id', component: UserModifyComponent, resolve: {user: UserResolve}},

UserResolve:

import {Injectable} from '@angular/core';
import {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} from '@angular/router';
import {User} from '../entity/user';
import {Observable} from 'rxjs/Observable';
import {UserService} from './user.service'; @Injectable()
export class UserResolve implements Resolve<User> { constructor(private userService: UserService) {
} resolve(route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<User> | Promise<User> | User {
return this.userService.getUserById(route.params.id);
}
}

获取数据:

this.activatedRoute.data.subscribe((data) => this.model = data.user);

userService:

import {Injectable} from '@angular/core';
import {HttpClient, HttpParams} from '@angular/common/http';
import {Observable} from 'rxjs/Observable'; @Injectable()
export class UserService { constructor(private http: HttpClient) {
} queryUsers(userName, fullName): Observable<any> {
const params = new HttpParams()
.set('userName', userName)
.set('fullName', fullName);
return this.http.get('/api/users', {params});
} getUserById(id): Observable<any> {
const url = '/api/users/' + id;
return this.http.get(url);
} deleteUser(id): Observable<any> {
const url = '/api/users/' + id;
return this.http.delete(url);
}
}

参考路由配置思路(课件abstract路由可不需要path):

const appRoutes: Routes = [
{
path: 'compose',
component: ComposeMessageComponent,
outlet: 'popup'
},
{
path: 'admin',
loadChildren: 'app/admin/admin.module#AdminModule',
canLoad: [AuthGuard]
},
{
path: 'crisis-center',
loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
data: { preload: true }
},
{ path: '', redirectTo: '/superheroes', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];
const adminRoutes: Routes = [
{
path: '',
component: AdminComponent,
canActivate: [AuthGuard],
children: [
{
path: '',
canActivateChild: [AuthGuard],
children: [
{ path: 'crises', component: ManageCrisesComponent },
{ path: 'heroes', component: ManageHeroesComponent },
{ path: '', component: AdminDashboardComponent }
]
}
]
}
];
const crisisCenterRoutes: Routes = [
{
path: '',
component: CrisisCenterComponent,
children: [
{
path: '',
component: CrisisListComponent,
children: [
{
path: ':id',
component: CrisisDetailComponent,
canDeactivate: [CanDeactivateGuard],
resolve: {
crisis: CrisisDetailResolver
}
},
{
path: '',
component: CrisisCenterHomeComponent
}
]
}
]
}
];

@angular/cli项目构建--路由3的更多相关文章

  1. @angular/cli项目构建--路由2

    app.module.ts update const routes: Routes = [ {path: '', redirectTo: '/home', pathMatch: 'full'}, {p ...

  2. @angular/cli项目构建--路由1

    app.module.ts import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angu ...

  3. @angular/cli项目构建--组件

    环境:nodeJS,git,angular/cli npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm instal ...

  4. @angular/cli项目构建--modal

    环境准备: cnpm install ngx-bootstrap-modal --save-dev impoerts: [BootstrapModalModule.forRoot({container ...

  5. @angular/cli项目构建--Dynamic.Form

    导入所需模块: ReactiveFormsModule DynamicFormComponent.html <div [formGroup]="form"> <l ...

  6. @angular/cli项目构建--animations

    使用方法一(文件形式定义): animations.ts import { animate, AnimationEntryMetadata, state, style, transition, tri ...

  7. @angular/cli项目构建--interceptor

    JWTInterceptor import {Injectable} from '@angular/core'; import {HttpEvent, HttpHandler, HttpInterce ...

  8. @angular/cli项目构建--httpClient

    app.module.ts update imports: [ HttpClientModule] product.component.ts import {Component, OnInit} fr ...

  9. @angular/cli项目构建--Dynamic.Form(2)

    form-item-control.service.ts update @Injectable() export class FormItemControlService { constructor( ...

随机推荐

  1. 剑指offer 面试32题

    面试32题: 题目:从上到下打印二叉树 题:不分行从上到下打印二叉树 解题代码: # -*- coding:utf-8 -*- # class TreeNode: # def __init__(sel ...

  2. Python操作——Memcached

    Memcached是一个高性能的分布式内存对象缓存系统,用于Web应用以减轻数据库的负载. 它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度. Memcached ...

  3. 前端基础之css样式(选择器)

    一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...

  4. Linux Shell编程 循环语法

    for循环 for 循环是固定循环,也就是在循环时已经知道需要进行几次循环.有时也把 for 循环称为计数循环.语法: for 变量 in 值1 值2 值3… do 程序 done 在这种语法中,fo ...

  5. 树莓派连接DHT11温湿度传感器(python)

    介绍 DHT11作为一个廉价配件,同时包含了温度.湿度传感器,而且,编码使用也非常简单. 本文介绍如果在树莓派中使用 DHT11,代码是Python.如果有任何疑问,欢迎在下面留言. 接线 VCC接5 ...

  6. jQuery仿Android锁屏图案应用

    在线演示 本地下载

  7. library-type:fr-unstanded vs fisrt-stand vs second-stanrd

    建库时是否是链特异性建库. Tophat2: --library-type The default is unstranded (fr-unstranded). If either fr-firsts ...

  8. create_workqueue和create_singlethread_workqueue【转】

    本文转载自:http://bgutech.blog.163.com/blog/static/18261124320116181119889/ 1. 什么是workqueueLinux中的Workque ...

  9. CCNA 课程 三

    交换机的MAC地址学习情况: 1.从一个接口收到数据帧,根据数据帧的原mac地址查找交换机的mac地址表,如果没有找到,将会添加数据帧的原mac地址和收到数据帧接口的对应条目,放进交换机的mac地址表 ...

  10. TCP的带宽估计和丢包恢复

    一.带宽估计 TCP的带宽估计主要通过拥塞控制算法实现,用到两个变量: 1.cwnd     TCP对当前链路可用带宽的估计 2.ssthreash   拥塞控制算法“假想”出来的可用带宽值 二.丢包 ...