動態修改延遲加載的路由不起作用

Question

我正在嘗試在延遲加載的功能模塊中修改路由，但沒有成功。 我嘗試了幾種方法，包括router.reset(newRoutes)但似乎都沒有。 （角度 9）

export class FeatureModule {
  static forRoot(routes?: Routes) {
    return {
      ngModule: FeatureModule,
      providers: [
        RouterModule.forChild(routes).providers // option 1
        // provideRoutes(routes), // option 2
        // { provide: ROUTES, useValue: routes }, // option 3
      ]
    }.ngModule
  }
}

FeatureModule被延遲加載到主應用程序中：

loadChildren: () => import('./feature/feature.module').then((m) => m.FeatureModule.forRoot(customRoutes)

任何選項都不起作用。 Angular 不檢測那些動態提供的路由

如果我在imports中提供 static 默認路由，那么它可以工作，但是我無法修改路由

@NgModule({
  imports: [RouterModule.forChild(defaultRoutes)]
})
export class FeatureModule { }

我想知道這是否與 Angular 本身有關，或者我做錯了什么

Answer 1

那是行不通的，因為imports和providers是兩個不同的東西，RouterModule 是一個模塊，所以它應該放在imports部分。

在惰性模塊中使用動態路由有點棘手，我不知道是否有其他方法，但您可以嘗試以下方法：

在FeatureModule中使用和導出一個變量，並在延遲加載時填充路由。

export const FeatureModuleRoutes = [];

@NgModule({
  imports: [RouterModule.forChild(FeatureModuleRoutes)]
})
export class FeatureModule { }

讓我們創建一個 InjectionToken 並將路由存儲在其中。

//Create the injection token
const ROUTES_STORE = new InjectionToken("Loading lazy routes");

//In your AppModule provide the routes that you need.
   {
      provide: ROUTES_STORE,
      useValue: [{featureRoutes: [{path: "", component: FeatureComponent}]}]
    },

要注入令牌，您需要一個注入器，即在延遲加載之前調用它的 AppModule，因此您可以提供一個 static 注入器並稍后使用它。

export class AppModule {
  static mInjector: Injector;

  //Inject the Injector so we can access it before de Lazy Module
  constructor(injector: Injector) {
    AppModule.mInjector = injector;
  }
}

現在你有了一個注入器和路由，是時候填充你的 FeatureModuleRoutes 了。 m它是文件，因此您可以在加載之前訪問您的變量。

    loadChildren: () =>
      import("./feature/feature.module").then(m => {
        const routeStore = AppModule.mInjector.get(ROUTES_STORE);
        routeStore.featureRoutes
          .forEach(route => (m.FeatureModuleRoutes as Array<any>).push(route));
        return m.FeatureModule;
      })

就是這樣，讓我知道它是否有幫助。