在 ngModule 中渲染没有显式依赖的组件

Question

我有一个名为 foo 的库，其中包含一个名为 FooContentComponent 的 angular 组件，可呈现各种类型的内容：

<ng-container *ngFor="let item of contents">
  <ng-container *ngIf="item.type === 'text'">{{item.text}}</ng-container>
  <ng-container *ngIf="item.type === 'math'">
    <foo-math [formula]="item.formula"></foo-math>
  </ng-continer>
</ng-container>

FooContentComponent 有自己的 ngModule。同样，FooMathComponent 也存在于它自己的 ngModule.

中

问题是：我不想在FooContentModule中显式导入FooMathModule。相反，如果应用程序想要呈现数学内容，我想将其留给使用 foo 库以包含 FooMathModule 的应用程序。如果应用程序不想呈现数学内容，它不会在其应用程序模块中导入 FooMathModule。

如果我不在 FooContentModule 中导入 FooMathModule，我会从编译器那里得到一个错误，它不知道 foo-math。我可以通过在 FooContentModule 中指定自定义模式来消除错误，但它仍然不会呈现 FooMathComponent.

我可以这样做吗？

Answer 1

您不能从应用模块的导入/声明/任何内容中定位子模块。但是，您可以做的是使用静态方法，例如Angular 路由器有其 forRoot()

let imports = [standard imports here];

@NgModule({
  imports
})
export FooContentModule {
  // or call it forRoot if you want
  public static withAdditionalImports(additionalImports: any[]) {
    imports.push.apply(imports, additionalImports);

    return FooContentModule;
  }

}

然后你可以在任何模块中使用它作为

@NgModule({
  imports: [
    FooContentModule.withAdditionalImports(FooMathModule)
  ]
})
export AnyModule {}

请注意，如果您至少执行一次（例如在 AppModule 中），它将随处可用，因此只需在之后导入 FooContentModule

在 ngModule 中渲染没有显式依赖的组件

Render components without explicit dependency in ngModule

angular

angular4

ng-modules