@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( ...
随机推荐
- Eclipse中svn操作
1.主干和分支间合并代码 合并根据目标不同分为2种: 1.分支合并到主干:主要用在修复完生产BUG,并上线之后.需把改动的代码合并到主干上. 2.主干合并到分支:公用的逻辑改动,需反映到所有并行的分支 ...
- XSS - html过滤
JS 根据白名单过滤HTML http://jsxss.com/zh/index.html 方案一: java的一个方案, 可以参考: http://winnie825.iteye.com/bl ...
- Java底层代码实现单文件读取和写入(解决中文乱码问题)
需求: 将"E:/data/车站一次/阿坝藏族羌族自治州.csv"文件中的内容读取,写入到"E:/data//车站一次.csv". 代码: public cla ...
- hadoop04---shell
Linux上的mysql安装之后卸载是卸载不干净的,ping服务器ping不通就是把icmp协议关闭了,ping使用的是icmp协议. Export是全局变量,所有用户登录进来都可以使用. 1.ipt ...
- springboot-vue项目前台1
- ACM训练小结-2018年6月16日
今天题目情况如下:A题:线段树+XOR性质.情况:由于写法问题,调试困难,浪费大量时间.B题:(对所有满足i mod p==q,求a[i]之和),无修改,直接上n*sqrt(n)的分块写法.情况:由于 ...
- 第八篇、正则表达式 re模块
一.常用匹配模式 #!/usr/bin/env python # -*- coding:utf-8 -*- import re #贪婪匹配:从后面开始 #()只需要提取括号中的内容,顺序从外到内 li ...
- nodejs往文件写入内容代码
const fs = require("fs"); // fs.wirteFile有三个参数 // 1,第一个参数是要写入的文件路径 // 2,第二个参数是要写入得内容 // 3, ...
- nginx location proxy pass
nginx: 192.168.1.23作为nginx反向代理机器 目标机器192.168.1.5上部署一个8090端口的nginx [root@localhost conf.d]# cat test. ...
- Kubernetes Kubeadm部署集群
Kubernetes高可用架构 Kubenetes 2个高可用核心 apiserver.etcd etcd:集群数据中心,需要保持高可用,用于存放集群的配置信息.状态信息及Pod等信息.如果数据丢失集 ...