Rxjs

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' 
  }

我有一个 observable 可以像这样获取数据：

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() 以便 observable 重播最后发出的值。

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 属性.

获取初始状态

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

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 - 重新分配一个可观察对象

Rxjs - reassigning an observable

angular-routing

angular