如何在Angular / Angular 9中初始化之前动态创建路由

由 发布于

我正在做一个将AngularJS应用程序转换为Angular的项目，而且我面临着有关路由的障碍。

TL / DR： 在使用路由模块之前，我需要根据API响应定义路由。

AngularJS的工作方案： （伪代码的排序如下）

每个人都有几种基本路线，这些路线以标准AngularJS方式定义：

/home
/settings
...etc

然后有基于API响应创建的动态路由

/purchase-requests
/invoices
/godzilla
...etc. Content doesn’t matter, basically, a dynamic list of routes that an existing API gives as an array of strings

现有AngularJS应用的基本工作流程：

  1. AngularJS应用不会立即使用绑定到元素
  2. ng-app，就像通常那样。
  3. 页面加载时会从API收到原始（或jQuery）响应。
  4. AngularJS应用使用以下方法初始化：
 angular.bootstrap(document.getElementById('mainElementId'),[‘appName']);

之所以能这样做是因为AngularJS的行为不是在加载时调用.config（）而是在有角度的应用程序引导时调用，我们将其推迟到API响应之后。

如今可用的示例AngularJS：

<script>

  let appList = [];
  const mainApp = angular.module('mainApp', ['ngRoute']);


  // Controllers
  mainApp.controller('mainController', mainController);
  mainApp.controller('homeController', homeController);
  mainApp.controller('appListController', appListController);
  mainApp.controller('appSingleController', appSingleController);
  mainApp.controller('errorController', errorController);

  // config will not be called until the app is bootstrapped
  mainApp.config(function($routeProvider) {

    // Default routes that everyone gets
    $routeProvider.when('/', { templateUrl: 'views/home.html', controller: 'homeController'});
    $routeProvider.when('/home', { templateUrl: 'views/home.html', controller: 'homeController'});

    // Add the dynamic routes that were retreived from the API
    for (let appName in appList) {
      $routeProvider.when(`/${appName}`, { templateUrl: 'views/app-list.html', controller: 'appListController'});
      $routeProvider.when(`/${appName}/new`, { templateUrl: 'views/app-single.html', controller: 'appSingleController'});
      $routeProvider.when(`/${appName}/view/:itemNumber`, { templateUrl: 'views/app-single.html', controller: 'appSingleController'});
    }

    $routeProvider.otherwise({ templateUrl: 'views/error.html', controller: 'errorController'});
  });



  $(document).ready(function() {
    const options = {
      type: 'GET',
      url: '/api/apps/getAvailableApps',
      success: onAppSuccess,
    };
    $.ajax(options);
  });

  function onAppSuccess(response) {
    appList = response.appList;
    angular.bootstrap(document.getElementById('mainApp'), ['mainApp']);
  }

</script>

<!-- Typically, you bind to the app using ng-app="mainApp" -->
<div id="mainApp" class="hidden" ng-controller="mainController">

  <!-- Route views -->
  <div ng-view></div>

</div>

在Angular 9（或看来是Angular的任何最新版本）中，路由是在初始化主要组件之前在路由模块中定义的：

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: '', component: DashboardComponent },
  { path: 'home', component: DashboardComponent },
  { path: 'settings', component: SettingsComponent },
];

Using router.resetConfig does not work

Let's say I have the main module load the API config first, then use resetConfig based on the response. This works great if the first page a user loads is / or /home or one of the other predefined routes: The new dynamic routes are created and navigation to them works.

但是，如果用户直接导航到未预定义的路由（例如/ godzilla），则路由器甚至不允许页面加载（或）（如果设置了通配符路由），则会显示404。ngOnInit（）在主要组件中（我曾尝试使用它来加载API响应）从来没有机会运行。

问题是：如何在执行甚至初始化路由器导航之前基于API响应创建路由？