在 Angular 中根据条件加载 ngModule 及其组件答案

【问题标题】：Load ngModule and its components based on conditional in Angular在 Angular 中根据条件加载 ngModule 及其组件
【发布时间】：2018-09-20 14:47:46
【问题描述】：

我是 Angular 的新手，我想知道是否可以根据 app.module 的条件加载和模块及其组件，或者哪里是最好的地方。

基本上我想做这样的事情：

if(user.deparment === 'coms') {
  //Use the communications.module and its components
}

我附上了一些图片，以便你们可以看到应用程序的结构。如有必要，我可以添加代码而不是图片。

App.module 图片

Communications.module 图片

【问题讨论】：

标签： angular angular-module

【解决方案1】：

你可以做一个简单的三元检查来有条件地导入一个模块。像这样：

import { NgModule, Optional } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({}) class MyModule {}

// toggle and watch the console
const production = true;

@NgModule({
  imports:      [ BrowserModule, production ? MyModule : []],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule {
  constructor(@Optional() module: MyModule) {
    console.log(module);
  }
}

Live demo

【讨论】：

很高兴我能帮上忙 :)
问题，如果我基于像 user.deparment 这样的动态值这样做，这仍然有效吗？有些用户可能是不同部门的一部分，所以我不能有一个常数，我只会在用户加载应用程序后知道该部门的价值
这种方法只适用于静态值。如果要配置提供程序，可以使用forRoot 静态方法angular.io/guide/ngmodule-faq#what-is-the-forroot-method
您可能对juristr.com/blog/2018/01/ng-app-runtime-config也感兴趣
我会研究一下！谢谢

【解决方案2】：

模块在您的应用程序开始时加载。您需要导入组件，并使用您需要的任何组件。您需要将您的组件注册到一个模块，以便您的组件是可访问的。

【讨论】：

所以基本上没有办法决定从应用程序开始不加载什么？所以一切都会加载，然后有条件地，我会决定在它们被加载到应用程序后使用什么和不使用什么..因为角度是 aot
是的，如果你想使用一个组件，你应该总是在模块中声明它，因为 Angular 需要它来编译。您可以选择导入如下@Tomasz 所示