Question

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

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状态诸如隐藏微调框等更改

Answer 1

AppComponent在路由器出口之外，无法访问此数据。仅路由的子组件可以访问它。

Answer 2

您可以使用“路由器事件”隐藏和显示微调器。 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

路由解析器问题

2 个答案: