Question

Angular 2.1.0，路由器3.1.0。

在创建仪表板组件时，我注意到每次路由到它时 - 它都是从头开始创建的。然后我检查了英雄之旅的演示者 - 同样的行为。

DashboardComponent

的修改

export class DashboardComponent implements OnInit {
  heroes: Hero[] = [];

  constructor(private heroService: HeroService) {
    console.log('DashboardComponent constructor')
  }

  ngOnInit(): void {
    this.heroService.getHeroes()
      .then(heroes => this.heroes = heroes.slice(1, 5));
    console.log('DashboardComponent ngOnInit')
  }
}

这是plunker。打开开发者控制台运行plunker - 应该看到2个日志：DashboardComponent constructor和DashboardComponent ngOnInit。点击Heroes然后再返回Dashboard - 再回复2个日志：构建并致电ngOnInit。

Plunker可能会使用旧库。我从John Papa git克隆了TOH（在撰写本文时他使用相同版本的Angular和路由器）并更改了DashboardComponent以获得这些控制台日志。结果 - 相同。

我已将ngOnDestroy添加到DashboardComponent，并在离开仪表板时调用它。所以它看起来像是设计行为。有什么好处？如何重用已创建的组件？

Answer 1

＆gt; = 2.3.0-rc.0

可以实现自定义RouteReuseStrategy来控制何时销毁和重新创建或重用路由组件。

<强>原始

这是＆＃34;按照设计＆＃34;。导航离开路线时会破坏组件，并在导航回路线时重新创建。

仅当路线参数发生变化但路线保持不变时，才会保留该组件。

有关于某些自定义缓存策略的讨论，但AFAIK尚未在此方向上完成任务。

Angular 2.1 - 路由时重新创建组件

1 个答案: