Angular4 多模块问题

Angular4 multiple modules issue

我有一个应用程序有多个视图,如导航和页面。所以我添加了一个布局模块并将该模块导入到主模块中,现在尝试在应用程序组件中使用布局模块导航组件。所以这应该显示 navigation.html 内容,但它是空白的。它也没有给出任何错误。不确定我做错了什么。下面是我的代码,可以给出正确的图片: 这里是 app.model.ts

    

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { LayoutsModule } from './layouts/index';

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        LayoutsModule,
        AppRoutingModule
      ],   
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

这里是 LayoutsModule

   

    import { NgModule } from '@angular/core';
    import { NavigationComponent } from './navigation/navigation.component';


    @NgModule({
      declarations: [
        NavigationComponent
      ],
      exports: [

      ],
      imports: [

      ],
      providers: [

      ]
    })
    export class LayoutsModule {}

和我的app.component.html

 

    <app-navigation></app-navigation>
    <router-outlet></router-outlet>

您需要在您的 LayoutModule 中导出要提供给其他模块的组件:

import { NgModule } from '@angular/core';
import { NavigationComponent } from './navigation/navigation.component';


@NgModule({
  declarations: [
    NavigationComponent,
  ],
  exports: [
    NavigationComponent,
  ],
  imports: [

  ],
  providers: [

  ]
})
export class LayoutsModule {}

有关共享模块的更多信息:https://angular.io/guide/sharing-ngmodules

您应该从 LayoutsModule 中导出 NavigationComponent,以便它可以在 LayoutsModule 中使用。基本上,无论你想公开给 Angular 中的另一个模块/系统使用什么,你都必须将那些 component/directive/pipe 放在 exports 元数据中NgModule 的选项或者更确切地说,它可以通过 Angular 路由器的 route 段加载。

@NgModule({
  declarations: [
    NavigationComponent
  ],
  exports: [
      NavigationComponent
  ],
  imports: [],
  providers: []
})
export class LayoutsModule {}

不确定为什么没有收到错误。它应该会引发错误。