首页 > 其他 > 详细

@angular/cli项目构建--路由3

时间:2017-11-25 23:30:00      阅读:409      评论:0      收藏:0      [点我收藏+]

路由定位:

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);
  }
}

 

@angular/cli项目构建--路由3

原文:http://www.cnblogs.com/Nyan-Workflow-FC/p/7896925.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!