@angular/cli项目构建--路由3
路由定位:
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的更多相关文章
- @angular/cli项目构建--路由2
app.module.ts update const routes: Routes = [ {path: '', redirectTo: '/home', pathMatch: 'full'}, {p ...
- @angular/cli项目构建--路由1
app.module.ts import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angu ...
- @angular/cli项目构建--组件
环境:nodeJS,git,angular/cli npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm instal ...
- @angular/cli项目构建--modal
环境准备: cnpm install ngx-bootstrap-modal --save-dev impoerts: [BootstrapModalModule.forRoot({container ...
- @angular/cli项目构建--Dynamic.Form
导入所需模块: ReactiveFormsModule DynamicFormComponent.html <div [formGroup]="form"> <l ...
- @angular/cli项目构建--animations
使用方法一(文件形式定义): animations.ts import { animate, AnimationEntryMetadata, state, style, transition, tri ...
- @angular/cli项目构建--interceptor
JWTInterceptor import {Injectable} from '@angular/core'; import {HttpEvent, HttpHandler, HttpInterce ...
- @angular/cli项目构建--httpClient
app.module.ts update imports: [ HttpClientModule] product.component.ts import {Component, OnInit} fr ...
- @angular/cli项目构建--Dynamic.Form(2)
form-item-control.service.ts update @Injectable() export class FormItemControlService { constructor( ...
随机推荐
- 剑指offer 面试32题
面试32题: 题目:从上到下打印二叉树 题:不分行从上到下打印二叉树 解题代码: # -*- coding:utf-8 -*- # class TreeNode: # def __init__(sel ...
- Python操作——Memcached
Memcached是一个高性能的分布式内存对象缓存系统,用于Web应用以减轻数据库的负载. 它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度. Memcached ...
- 前端基础之css样式(选择器)
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
- Linux Shell编程 循环语法
for循环 for 循环是固定循环,也就是在循环时已经知道需要进行几次循环.有时也把 for 循环称为计数循环.语法: for 变量 in 值1 值2 值3… do 程序 done 在这种语法中,fo ...
- 树莓派连接DHT11温湿度传感器(python)
介绍 DHT11作为一个廉价配件,同时包含了温度.湿度传感器,而且,编码使用也非常简单. 本文介绍如果在树莓派中使用 DHT11,代码是Python.如果有任何疑问,欢迎在下面留言. 接线 VCC接5 ...
- jQuery仿Android锁屏图案应用
在线演示 本地下载
- library-type:fr-unstanded vs fisrt-stand vs second-stanrd
建库时是否是链特异性建库. Tophat2: --library-type The default is unstranded (fr-unstranded). If either fr-firsts ...
- create_workqueue和create_singlethread_workqueue【转】
本文转载自:http://bgutech.blog.163.com/blog/static/18261124320116181119889/ 1. 什么是workqueueLinux中的Workque ...
- CCNA 课程 三
交换机的MAC地址学习情况: 1.从一个接口收到数据帧,根据数据帧的原mac地址查找交换机的mac地址表,如果没有找到,将会添加数据帧的原mac地址和收到数据帧接口的对应条目,放进交换机的mac地址表 ...
- TCP的带宽估计和丢包恢复
一.带宽估计 TCP的带宽估计主要通过拥塞控制算法实现,用到两个变量: 1.cwnd TCP对当前链路可用带宽的估计 2.ssthreash 拥塞控制算法“假想”出来的可用带宽值 二.丢包 ...