[angular 2+]如何在angular应用程序启动之前动态获取路由列表

18 浏览
0 Comments

[angular 2+]如何在angular应用程序启动之前动态获取路由列表

在Angular中，我需要在应用程序启动之前获取路由数据。类似于我们在AngularJS中所做的操作（参考链接：[https://stackoverflow.com/a/16539428/6687096]）。在上述链接中，我们可以通过正常的AJAX调用从服务器获取数据，然后手动启动应用程序。我们如何在Angular中实现相同的机制呢？或者是否有任何预先构建的事件可以在应用程序启动之前从服务器获取数据？还是我们必须从main.ts文件中进行http调用？如果我们这样做，如何与其他组件共享响应？例如：

if (environment.production) {
  enableProdMode();
}
someHttpCall().then(function(response){
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.log(err));
})

如果我们像上面这样做，如何创建HttpClient实例，因为没有类可用？

0

1 答案

0 Comments

在Angular 2+中，有时我们需要在应用启动之前动态获取路由列表。下面我们来看一下这个问题出现的原因以及解决方法。

问题的原因是，Angular应用在启动时会加载所有的路由配置，并在运行时根据路由配置来进行导航。而有些情况下，我们可能需要在应用启动之前获取路由列表，例如在应用启动时根据后端返回的权限动态生成路由。

解决这个问题的方法是使用Angular提供的APP_INITIALIZER机制。APP_INITIALIZER是一个Angular提供的Token，可以用来定义一个函数，该函数在应用启动之前被调用，并且可以返回一个Promise。我们可以在这个函数中进行异步操作，例如获取路由列表，并将其存储在一个全局变量中。

具体的解决方法如下：

1. 首先，在应用的根模块中导入APP_INITIALIZER和一个用于获取路由列表的服务。

import { APP_INITIALIZER } from '@angular/core';
import { RouteService } from './route.service';

2. 在根模块的providers中配置APP_INITIALIZER，并指定要调用的初始化函数。

@NgModule({
  providers: [
    RouteService,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [RouteService],
      multi: true
    }
  ]
})
export class AppModule { }

3. 在初始化函数中，通过注入RouteService来获取路由列表，并将其存储在全局变量中。

export function initializeApp(routeService: RouteService) {
  return () => routeService.getRoutes();
}

4. 在RouteService中，实现一个getRoutes方法来获取路由列表，并将其存储在一个全局变量中。

import { Injectable } from '@angular/core';
@Injectable()
export class RouteService {
  private routes: any[];
  getRoutes(): Promise {
    return new Promise((resolve, reject) => {
      // Fetch routes from API or any other source
      // Store routes in this.routes
      // Resolve the promise
      resolve(this.routes);
    });
  }
}

通过以上步骤，我们就可以在应用启动之前动态获取路由列表了。在应用启动时，Angular会自动调用初始化函数，并等待其返回的Promise完成后再继续启动应用。

希望以上内容能帮助到你解决问题。如果你想了解更多关于APP_INITIALIZER的用法，可以参考这个回答。

0