在 Angular2 的 Master / Details 模式中切换项目时更新 url

Question

我正在实现 Angular2 教程中描述的 Master / Detail 模式： https://angular.io/docs/ts/latest/tutorial/toh-pt2.html

简化示例：

import { Component } from '@angular/core';

export class Hero {
  id: number;
  name: string;
}

@Component({
  selector: 'my-app',
  template:`
    <ul>
      <li *ngFor="let hero of heroes" (click)="onSelect(hero)">
        {{hero.name}}
      </li>
    </ul>

    <div *ngIf="selectedHero">
      <h2>{{selectedHero.name}} details!</h2>
    </div>
  `,
})

export class AppComponent {
  heroes = HEROES;
  selectedHero: Hero;
  onSelect(hero: Hero) { this.selectedHero = hero; }
}

每当单击列表中的项目时，其详细信息都会显示在屏幕上。但是，我找不到一种方法来更新位置栏中的 url 以反映选择了其中一个项目的事实。

唯一的方法似乎是使用路由器导航到另一个视图，但它会刷新整个主从组件，包括项目列表。

我的目标只是刷新部分页面，同时保持 url 与显示的内容同步。

Answer 1

不确定“刷新整个页面”是什么意思。这正是路由器所做的不。

如果你使用@angular/router-deprecated，那么你可以通过添加实现CanReuse

routerCanReuse(/*nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction*/) {
  return true;
}

这样，当您导航到仅更改参数值的同一路由时，路由器不会删除并重新创建组件。

我不认为@angular/router 支持这一点，而且@angular/router 很快就会被替换再次。