1

手动创建路由更改流而不是像 Angular 指南建议的那样使用内置的 @angular/router 的 ActivatedRoute 背后的动机是什么？

export class HeroListComponent implements OnInit {
  heroes$: Observable<Hero[]>;

  private selectedId: number;

  constructor(
    private service: HeroService,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    this.heroes$ = this.route.paramMap
      .switchMap((params: ParamMap) => {
        // (+) before `params.get()` turns the string into a number
        this.selectedId = +params.get('id');
        return this.service.getHeroes();
      });
  }
}

几个月来，我参与了不同的项目，并看到开发人员通过创建路由更改流来控制路由更改，通常您会看到如下内容：

this.route_sub$ = this.route$
      .filter((value) => value.params.hasOwnProperty('id') && value.params.hasOwnProperty('date_id'))
      .subscribe((value) => {
        this.store.dispatch(SomethingEventActions.view({ id: value.params.id }));

我通常会收到这样的回复：

路由变化是状态变化，所以应该由状态管理来处理

想法？

4

1 回答 1

1

路由更改是状态更改，但我建议使用 @ngrx/router-store 而不是订阅路由并调度操作以更新状态，就像在上一个代码片段中一样。

使用@ngrx/router-store，您可以定义一个Router State Serializer，它只返回您需要的RouterStateSnapshot（RouterStateSnapshot是一个复杂的结构，包含的方式比通常需要的多）。每次发生路线导航操作时，都会设置为状态。

这样，您可以直接订阅路由器状态，而不必订阅路由参数然后更新您的状态（通过调度操作）。

这样，所有路由器状态都由序列化程序处理，并且所有组件都可以从状态访问。

在您的示例中，您必须在需要访问路由的每个组件中复制订阅和操作的分派。

于 2017-10-27T12:58:16.537 回答