angular - 路由解析器的问题

问题描述

我有一个带有解析器的延迟加载路由：

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        component: MyComponent,
        resolve: {
          data: MyService
        }
      }
    ]
  }
];

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

我的模块

@NgModule({
  imports: [
    CommonModule,
    MyRoutingModule,
    ...
  ],
  declarations: [
    MyComponent,
    ...
  ],
  providers: [MyService]
})
export class MyModule {}

我的服务resolver：

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    return forkJoin(
      this.getData1(),
      this.getData2(),
      this.getData3()
    );
  }

我正在订阅data我的应用组件上的属性：

export class AppComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.data.subscribe(x => {
      data = x; //x = undefined
    });
  }
}

问题x始终是undefined
任何想法为什么我无法访问已解决的数据以及如何解决这个问题？

更新：我想知道数据何时解析，所以我想隐藏微调器。根据@OneLunch-Man 的帖子，我的应用程序组件将无法访问该数据，那么您将如何解决这个问题，我需要在我的应用程序组件上知道的只是数据何时被解析，以便我可以做一些 UI 状态隐藏微调器等更改

标签： angularangular-router

您可以使用路由器事件隐藏和显示微调器。而且 routerEvent 也有一个 ResolveStart 和 ResolveEnd 实例，根据您的需要使用它

constructor(private router: Router) {
    router.events.subscribe((routerEvent: Event) => {
      if (routerEvent instanceof NavigationStart) {
      this.loading = true;
    }
    if (routerEvent instanceof NavigationEnd ||
        routerEvent instanceof NavigationCancel ||
        routerEvent instanceof NavigationError) {
      this.loading = false;
    }
    });
  }

参考：https ://angular.io/api/router/RouterEvent#subclasses

angular - 路由解析器的问题

问题描述

解决方案

推荐阅读