Angular2-router：如何只更改路由的参数？答案

【问题标题】：Angular2-router: How to only change a parameter of a route?Angular2-router：如何只更改路由的参数？
【发布时间】：2016-10-26 11:09:26
【问题描述】：

我想在我的应用程序中有以下路由：

export const routes: Routes = [
    { 
       path: ':universityId', 
       component: UniversityComponent,
       children: [
           { path: 'info', component: UniversityInfoComponent },
           { path: 'courses/:status', component: CoursesByStatusComponent }
       ]
    }
]

在/1/info 或/1/courses/open url 上，我如何仅从UniversityComponent 更改:universityId？

简单的router.navigate(['../', 2], {relativeTo: currentRoute }) 不会这样做，因为它会重定向到/2，从而丢失所有其他信息。使用'../2/courses/open 也不是一种选择——那时我可以在任何子路线上。我能想到的最好办法是：

const urlTree = this.router.parseUrl(this.router.url);
urlTree.root.children['primary'].segments[0].path = '2';
this.router.navigateByUrl(urlTree);

但是有点丑

【问题讨论】：

您找到答案了吗？我也有兴趣知道。
@GünterZöchbauer 为什么没有回答这个问题？ :)
@sabithpocker 没有那么多时间了：-/
@GünterZöchbauer 很酷，对你有好处。您的回答非常很有用。你有点回答了我搜索的每一个问题：P
很高兴听到。我希望你喜欢 Angular :)

标签： angular angular2-routing

【解决方案1】：

这很简单。您可以简单地尝试使用 this.router.navigate(["../2", "courses", "open"], {relativeTo: this.route});

（或）

this.router.navigate(["../2", "courses/open"], {relativeTo: this.route});

这会将您重定向到 ../2/courses/open。

【讨论】：

【解决方案2】：

这里有一些代码与我上面关于使用元组的评论一起使用：所以复制这个模式两次......这是shows 如何将这些类集成到您的项目中。所以：

将链接中的代码的 data-component-resolver.ts 更改为 parent-child-resolver.ts。
将链接中的data-component.ts替换为下面的parent-child.component.ts

父子解析器.ts

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs';
import {Resolve, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router';
import {Parent} from '../shared/model/parent';
import {Children} from '../shared/model/children';
import {ParentService} from '../providers/parent.service';

@Injectable()
export class parentChildResolver implements Resolve<[Parent,(Children[])>

  constructor(private parentService : ParentService) {}

  resolve(  route: ActivatedRouteSnapshot,
            state: RouterStateSnapshot
         ) : Observable<[Parent,(Children[])> 
  {
      return this.parentService.findParentById(route.params['id'])
        .switchMap(parent => 
            this.parentService.findChildrenForParent(parent.id),
              (parent, children) => [parent, children]
         );
  }
}

parent-child.component.ts

import {Component, OnInit} from '@angular/core';
import {Parent} from '../shared/model/parent';
import {Children} from '../shared/model/children';
import {Observable} from 'rxjs';
import {ActivatedRoute} from '@angular/router';

@Component({
    selector: 'parent-child',
    templateUrl: './parent-child.component.html'
})

export class ParentChildComponent implements OnInit{
  $parent: Observable<Parent>;
  $children: Observable<Children[]>;

  constructor(private route:ActivatedRoute) {}

  ngOnInit() {
    this.parent$ = this.route.data.map(data => data['key'][0]); //from router.config.ts
    this.children$ = this.route.data.map(data => data['key'][1]);
  }
}

【讨论】：