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

我有一个模块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？

谢谢

最佳答案

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

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

有关更多信息，请参见：https://www.youtube.com/watch?v=ntJ-P-Cvo7o&t=2s

更新

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



如上图所示...如果共享模块导入Forms Module，而App Module导入共享模块，则除非Shared Module导出，否则App Module将无权访问Forms Module组件，指令和管道（例如本示例中的ngModel）。表单模块。

键：


橙色线条：进口
灰线：出口
蓝线：声明

关于javascript - 关于Angular 2/4中的BrowserModule的困惑，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45442765/