带有参数或来自路由器存储的参数的操作

Question

问题：

我有组件 url 例如：

https://127.0.0.0/car/carName1/view1

和

ngOnInit(): void {
    this.store$.dispatch(Actions.loadView());    
  }

此调度操作和效果从服务中获取单个视图并将其添加到集合中

状态将如下所示：

{
  views: {

     view1: {
        data: []
     }

     view2: {
        data: []
     }
  }
}

现在，在同一个组件中，我需要从包含更多我需要的数据的视图中获取更多信息，或者换句话说，我需要 select 从中提取一些数据

    ngOnInit(): void {
        this.data$ = this.store$.select(Selectors.selectMoreData);
        this.store$.dispatch(Actions.loadView());    
      }

问题是 Selectors.selectMoreData 需要查看 name/key。因为 state 的视图比当前组件的一个视图多。

我有什么可能性？就像在效果中使用路由器存储并从 url 获取密钥一样？或者我应该退后一步，因为这是完全错误的。

Answer 1

已更新

在评论中讨论后，我的答案是下一个：在 ngOnInit 中做所有事情以避免到处传递变量的复杂性。

ngOnInit(): void {
  this.data$ = this.store$.select(Selectors.selectMoreData, this.viewName);
  this.store$.dispatch(Actions.loadView());    
}

或者 router-store

ngOnInit(): void {
  this.data$ = this.store$.pipe(
    select(selectRouteParam('viewName')),
    switchMap(viewName => combineLatest([
      of(viewName),
      this.store$.select(Selectors.selectMoreData, this.viewName)),
    ]),
    map(([viewName, data]) => ({viewName, data}));
  );

  this.store$.dispatch(Actions.loadView());    
}

并在模板中

<ng-container *ngIf="data$ | async as data">
  <child [view]="data.viewName" [data]="data.data"></child>
</ng-container>

或者 this.activatedRoute

ngOnInit(): void {
  this.data$ = this.activatedRoute.paramMap.pipe(
    map(params => params.get('viewName')),
    switchMap(viewName => combineLatest([
      of(viewName),
      this.store$.select(Selectors.selectMoreData, this.viewName)),
    ]),
    map(([viewName, data]) => ({viewName, data}));
  );

  this.store$.dispatch(Actions.loadView());    
}

原版

您错过了第三个选项 - 使用解析器为 ActivatedRoute.data 中的组件提供数据，您可以在此处的答案中找到示例：.

除此之外回到 viewName。您可以将其添加为路线数据，然后它也可以在 router-store 中访问。

例如，您可以定义这样的路线。

{
    path: 'test',
    component: TestComponent,
    data: {
        viewName: 'test',
    },
},

然后用router-store到select就

this.store.select(selectRouteData).subscribe(console.log); // {viewName: 'test'}

带有参数或来自路由器存储的参数的操作

Action with parameter or parameter from router-store

ngrx

angular

ngrx-router-store