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

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

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

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

Answer 1

不确定你的意思＆＃34;刷新整个页面＆＃34;。这正是路由器所做的不。

如果您使用@angular/router-deprecated，则可以通过添加

来实施CanReuse

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

这样，当你导航到只有参数值改变的同一路线时，路由器不会丢弃并重新创建组件。

我不认为@angular/router支持此功能，而@angular/router将很快再次替换。

在Angular2中的主/详细信息模式中切换项目时更新URL

1 个答案: