Question

在后端调用之后，我需要在NgModule中动态声明一些组件。

我已经尝试了各种解决方案，例如在运行时使用import api进行导入，但是随后我不得不在动态生成的路由中使用它，这似乎不起作用。到目前为止，这是最好的解决方案，但仍然无法正常工作：

app.module：

export function configFactory(componentLoader: ComponentLoaderService) {
  return () => componentLoader.loadComponents();
}
const componentsToLoad = ComponentLoaderService.components;
@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: configFactory,
      deps: [ComponentLoaderService],
      multi: true,
    }
  ],
  declarations: [
    AppComponent,
    ...componentsToLoad
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DynamicModule.withComponents(componentsToLoad)
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

ComponentLoaderService：

@Injectable({
  providedIn: 'root'
})
export class ComponentLoaderService {

  static components = [];
  constructor() {
  }

  public static getComponents() {
    console.log(this.components); //<--- here
    return this.components;
  }
  public loadComponents() {
    setTimeout(() => {
      ComponentLoaderService.components.push(AppComponent);
    }, 5000);
  }

}

问题在于getComponents在该loadComponent完成之前被调用。如何以同步方式进行此操作，或者在运行时是否存在另一种方式来声明它们以进行声明？是否存在另一种在APP_INITIALIZER之前运行鳕鱼的方法？

感谢您的关注

动态地将组件声明为NgModule

0 个答案: