关于Angular 2/4

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 {}

现在，当我运行应用程序时，我＆＃39;我收到Can't bind to 'ngIf' since it isn't a known property of 'div'.错误，根据我的理解不应该发生因为我＆＃39;}我在BrowserModule中使用AppModule并在FooModule中加载AppModule的路由。

我错过了什么吗？

我＆＃39;我正在使用Angular CLI v1.2.0和Angular 4.2.5。

修改

我知道要解决此问题，我需要在CommonModule中导入FooModule。但这正是我＆＃39;我首先提出这个问题，当我在BrowserModule中导入AppModule并重新导出CommonModule时，为什么我需要在每个单独的模块中加入CommonModule？

由于

Answer 1

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

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

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

更新

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

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

KEY：

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

Answer 2

将CommonModule导入FooModule和任何其他模块。 BrowserModule导入CommonModule。 CommonModule包含*ngIf等指令