Question

我正在使用Angular 7，并且正在尝试从路线中获取数据。

我的惰性路由设置如下：

  {
    data: { menuItems: DASHBOARD_MENU_ITEMS },
    path: 'dashboard',
    loadChildren: './modules/dashboard/dashboard.module#DashboardModule',
  },
  {
    data: { menuItems: ADMIN_MENU_ITEMS },
    path: 'admin', 
    loadChildren: './modules/admin/admin.module#AdminModule' 
  }

我可以观察到这样获取数据：

menuItems$: Observable<any[]>;

在我的组件之一中，我具有以下内容：

this.menuItems$ = this.route.firstChild.firstChild.data;

    this.menuItems$ = this.router.events.pipe(
      // startWith(this.route.firstChild.firstChild.data),
      filter(e => e instanceof RoutesRecognized),
      map((event: RoutesRecognized) => {
        console.log(event.state.root.firstChild.firstChild.firstChild.data)
        return event.state.root.firstChild.firstChild.firstChild.data as NbMenuItem[];
      }));

但这对我不起作用，因为我相信我正在重新分配我的可观察变量menuItems$。

我需要这样做，因为我需要在第一次点击路线时（这不会触发来自this.router.events的事件）以及每次用户导航时获取数据。

如果我使用.subscribe()表示法，那么它可以正常工作，但我不想这样做。我在这里做什么错了？

Answer 1

我认为您想使用shareReplay()，以便可观察对象重播最后发出的值。

https://www.learnrxjs.io/operators/multicasting/sharereplay.html

this.menuItems$ = this.router.events.pipe(
  filter(e => e instanceof RoutesRecognized),
  map((event: RoutesRecognized) => event.state.root.firstChild.firstChild.firstChild.data),
  startWith(this.route.firstChild.firstChild.data),
  shareReplay(1)
);

您还应该将startWith()移到filter()之后，以便过滤器不会删除第一个值。

我不能完全确定以上内容是否正确。我只是在猜测。

Answer 2

我相信您是将Observable传递到startWith中，而不是传递初始状态。您可以使用snapshot属性来获取初始状态。

您还需要将startWith运算符放在filter和map之后。

const initialMenuItems = this.route.firstChild.firstChild.snapshot.data;

this.menuItems$ = this.router.events.pipe(
  filter(e => e instanceof RoutesRecognized),
  map((event: RoutesRecognized) => {
    console.log(event.state.root.firstChild.firstChild.firstChild.data);
    return event.state.root.firstChild.firstChild.firstChild.data as NbMenuItem[];
  }),
  startWith(this.route.firstChild.firstChild.data)
);

RXJS-重新分配可观察对象

2 个答案: