@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( ...
随机推荐
- 《Python机器学习》笔记(五)
通过降维压缩数据 在前面已经介绍了几种不同的特征选择技术对数据集进行降维的方法.另一种常用于降维的特征选择方法就是特征抽取.数据压缩也是机器学习领域中的一个重要内容.数据压缩技术可以帮助我们对数据及逆 ...
- 20170524 委外采购的物料BOM
目标:找委外采购订单BOM, 我的方法:1.直接在电脑中搜索关键字:2.到系统中找数据查询3.委外采购订单系统如何操作? 数据怎么做, 实施: 结果:MDBAEKET, "采购订单项目计划行 ...
- 20170411 debug窗口执行文件
[FUNCTION] Command=/H Title=Debugger Type=SystemCommand
- hadoop03---nginx+keepalived
1.1.反向代理 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求 ...
- yii常用操作函数
<?php defined('YII_DEBUG') or define('YII_DEBUG', true); //当在调试模式下,应用会保留更多日志信息,如果抛出异常,会显示详细的错误调用堆 ...
- XML文件结构和基本语法
XML文件的结构性内容,包括节点关系以及属性内容等等.元素是组成XML的最基本的单位,它由开始标记,属性和结束标记组成.就是一个元素的例子,每个元素必须有一个元素名,元素可以若干个属性以及属性值. x ...
- windows下载Mysql-python
Mysql-python第三方模块官方不支持windows系统,而国外大学提供了非官方 的支持windows系统的模块,可前往 https://www.lfd.uci.edu/~gohlke/pyth ...
- linux下安装LAMP环境,也就是PHP+linux的开发运行环境(centos7)
注:整理至http://blog.51cto.com/afterdawn/1923139 LAMP(linux.apache.mysql.php),是四个套件的合成,简单讲就是要把php运行在linu ...
- iOS应用网络安全之HTTPS
移动互联网开发中iOS应用的网络安全问题往往被大部分开发者忽略,iOS9和OS X 10.11开始Apple也默认提高了安全配置和要求.本文以iOS平台App开发中对后台数据接口的安全通信进行解析和加 ...
- Cgroups控制cpu,内存,io示例【转】
本文转载自:https://www.cnblogs.com/yanghuahui/p/3751826.html 百度私有PaaS云就是使用轻量的cgoups做的应用之间的隔离,以下是关于百度架构师许立 ...