Angular：手动创建路由更改流与使用内置的@angular/router's

Question

手动创建路由更改流而不是像 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 }));

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

route changes are state changes, so should be handled by state management

想法？

Answer 1

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

使用@ngrx/router-store 你定义了一个 Router State Serializer 只有 return 你需要的 RouterStateSnapshot 的东西（RouterStateSnapshot 是一个复杂的结构包含更多比通常是必要的）。每次发生路线导航操作时都会设置状态。

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

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

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

Angular：手动创建路由更改流与使用内置的@angular/router's

Angular : Manually creating a stream of route changes vs Using the built in @angular/router's

routing

redux

ngrx

angular

angular-redux