javascript - Angular 2/4 中关于 BrowserModule 的困惑

Question

我有一个模块 AppModule 和另一个模块 FooModule。我在 FooModule 中有一些组件，并且像任何普通应用程序一样在 AppModule 中加载 FooModule 的路由。

以下是AppModule的示例代码:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router'
import { BrowserModule }  from '@angular/platform-browser';

import { AppComponent } from 'app/components/app';

@NgModule({
 imports: [
    BrowserModule,
    RouterModule.forRoot([
      {
        path: 'foo',
        loadChildren: './foo.module#FooModule'
      }
    ])
    ],
    declarations: [AppComponent],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

以下是FooModule的示例代码:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router'

import { FooComponent } from 'app/components/foo';

@NgModule({
 imports: [
    RouterModule.forChild([
      {
        path: '',
        component: FooComponent
      }
    ])
    ],
    declarations: [FooComponent],
})
export class FooModule {}

现在，当我运行该应用程序时，我收到 Can't bind to 'ngIf'because it isn't aknown property of 'div'. 错误，根据我的理解应该是这样的不会发生这种情况是因为我在 AppModule 中使用 BrowserModule 并在 AppModule 中加载 FooModule 的路由。

我错过了什么吗？

我正在使用 Angular CLI v1.2.0 和 Angular 4.2.5。

编辑

我知道要解决此问题，我需要在 FooModule 中导入 CommonModule。但这正是我首先问这个问题的原因，当我在 AppModule 中导入 BrowserModule 并重新导出 CommonModule 时，为什么我需要在每个单独的模块中包含 CommonModule 吗？

谢谢

Answer 1

在每个功能模块中，例如您的 fooModule，您需要导入 CommonModule。它包含通用指令和管道。

实际上，BrowserModule 导入并重新导出 CommonModule，因此它们导出相同的功能。

有关详细信息，请参阅:https://www.youtube.com/watch?v=ntJ-P-Cvo7o&t=2s

更新

模块不被继承。换句话说，除非导入该模块或导出该模块的另一个模块，否则您无法获得该模块的功能。

如上图所示...如果 Shared Module 导入 Forms Module 并且 App Module 导入 Shared Module，则 App Module 将无法访问 Forms Module 组件、指令和管道(例如本例中的 ngModel)，除非共享模块导出表单模块。

关键:

• 橙色线:进口
• 灰线:导出
• 蓝线:声明