路由定位:

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. Eclipse中svn操作

    1.主干和分支间合并代码 合并根据目标不同分为2种: 1.分支合并到主干:主要用在修复完生产BUG,并上线之后.需把改动的代码合并到主干上. 2.主干合并到分支:公用的逻辑改动,需反映到所有并行的分支 ...

  2. XSS - html过滤

    JS 根据白名单过滤HTML http://jsxss.com/zh/index.html   方案一: java的一个方案, 可以参考:  http://winnie825.iteye.com/bl ...

  3. Java底层代码实现单文件读取和写入(解决中文乱码问题)

    需求: 将"E:/data/车站一次/阿坝藏族羌族自治州.csv"文件中的内容读取,写入到"E:/data//车站一次.csv". 代码: public cla ...

  4. hadoop04---shell

    Linux上的mysql安装之后卸载是卸载不干净的,ping服务器ping不通就是把icmp协议关闭了,ping使用的是icmp协议. Export是全局变量,所有用户登录进来都可以使用. 1.ipt ...

  5. springboot-vue项目前台1

  6. ACM训练小结-2018年6月16日

    今天题目情况如下:A题:线段树+XOR性质.情况:由于写法问题,调试困难,浪费大量时间.B题:(对所有满足i mod p==q,求a[i]之和),无修改,直接上n*sqrt(n)的分块写法.情况:由于 ...

  7. 第八篇、正则表达式 re模块

    一.常用匹配模式 #!/usr/bin/env python # -*- coding:utf-8 -*- import re #贪婪匹配:从后面开始 #()只需要提取括号中的内容,顺序从外到内 li ...

  8. nodejs往文件写入内容代码

    const fs = require("fs"); // fs.wirteFile有三个参数 // 1,第一个参数是要写入的文件路径 // 2,第二个参数是要写入得内容 // 3, ...

  9. nginx location proxy pass

    nginx: 192.168.1.23作为nginx反向代理机器 目标机器192.168.1.5上部署一个8090端口的nginx [root@localhost conf.d]# cat test. ...

  10. Kubernetes Kubeadm部署集群

    Kubernetes高可用架构 Kubenetes 2个高可用核心 apiserver.etcd etcd:集群数据中心,需要保持高可用,用于存放集群的配置信息.状态信息及Pod等信息.如果数据丢失集 ...