带有 RxJs 管道的路由解析器不会触发组件的 ngOnInit

Question

我正在尝试使用最终会触发 HomePage 组件的 ngOnInit 的 ResolverSevice 来解析路由。路由求解器基本上有条件地重定向，重新触发解析器检索一些页面数据。

但是问题是路由解析器似乎没有触发组件的 ngOnInit。

export class ResolverService implements Resolve<Observable<Page>> {

  constructor(
    private readonly httpClient: HttpClient,
    private readonly ngRedux: NgRedux<any>,
    private readonly router: Router,
  ) {}

  private homeConfig: {
    [key: string]: string;
  } = {
    en: '/en/home',
    fr: '/fr/home',
    es: '/es/home',
  };
  
  private redirectUrls: string[] = [
    ...Object.values(this.homeConfig),
    '/home',
    '/',
  ];
  
  resolve(
    _route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<Page> {
    return this.ngRedux.select(state => state.language).pipe(
      switchMap((language: string) => {
        const homeUrl = this.homeConfig[language];
        if (this.redirectUrls.some(value => value === state.url) &&
          state.url !== homeUrl
        ) {
          this.router.navigateByUrl(homeUrl);
          // And return an empty observable (so don't fetch a page data)
          return EMPTY;
        }
        return this.httpClient
          .get<Page>('/api/pages/', {
            params: {
              requestPath: state.url.split('?')[0],
            },
          });
      }),
    );
  }
}

const routes: Routes = [
  {
    path: '',
    component: HomePage,
    resolve: {
      page: ResolverService,
    },
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class PageRoutingModule {}

export class HomePage implements OnInit {
    ngOnInit(): void {
        console.log('test');
    }
}

奇怪的是，当 RxJs 管道被移除时，上面的设置确实有效（见下面的代码示例）。但是，我确实需要管道，因为它提供了来自用于导航本身的 NgRedux 存储的参数。

resolve(
  _route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
): Observable<Page> {
  const homeUrl = this.homeConfig['en'];
  if (this.redirectUrls.some(value => value === state.url) &&
    state.url !== homeUrl
  ) {
    this.router.navigateByUrl(homeUrl);
    // And return an empty observable (so don't fetch a page data)
    return EMPTY;
  }
  return this.httpClient
    .get<Page>('/api/pages/', {
      params: {
        requestPath: state.url.split('?')[0],
      },
    });
}

我想知道为什么带有管道示例的 HomePage 组件不触发 ngOnInit？

Answer 1

NgRedux 的 .select 实际上从未完成，因此保持活动状态并且 resolve 函数不会 return.

使用 .first() 或 take(1) 将获取第一个值并完成 observable。

带有 RxJs 管道的路由解析器不会触发组件的 ngOnInit

Route resolver with RxJs pipe does not trigger ngOnInit of component

rxjs

angular