关于Angular 2/4中BrowserModule的困惑

Question

我有一个模块AppModule和另一个模块说FooModule.我有一些组件FooModule和我正在加载的路线FooModule中AppModule像任何正常的应用程序会做.

以下是示例代码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' since it isn't a known property of 'div'.错误,因为我按我的理解,不应该发生"正在使用BrowserModule中AppModule,并加载路线FooModule中AppModule.

我错过了什么吗？

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

编辑

我知道,要解决这个问题,我需要进口CommonModule在FooModule.但是,这也正是为什么我要问的第一个地方这个问题,当我已导入BrowserModule在AppModule其中转口CommonModule那么为什么我需要包括CommonModule每个单独模块中？

谢谢

Answer 1

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

实际上,BrowserModule进口和再出口CommonModule,所以他们出口相同的功能.

有关详细信息,请参阅:https://www.youtube.com/watch？v = antJ-P-Kow7o&t = 2s

UPDATE

模块不是继承的.换句话说,除非导入该模块或导出它的其他模块,否则无法获得模块的功能.

如上图所示...如果共享模块导入表单模块和应用程序模块导入共享模块,则除非共享模块导出,否则应用程序模块将无法访问表单模块组件,指令和管道(例如本示例中的ngModel)表格模块.

键:

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