首页 文章

Angular4多个模块问题

提问于
浏览 次
5

我有一个应用程序，它有多个视图，如导航和页面 . 所以我添加了一个布局模块并将该模块导入主模块，现在尝试在app组件中使用布局模块导航组件 . 所以这应该显示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>
angular

2 回答

  • 0

    您应该从 LayoutsModule 导出 NavigationComponent ，以便它可以用完 LayoutsModule . 基本上无论你希望暴露给Angular中的另一个模块/系统使用什么，你必须将 component / directive / pipe 放在 NgModule 的 exports 元数据选项中，或者更确切地说它可以通过Angular Router的 route 段加载 .

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

    不确定为什么你没有收到错误 . 它应该抛出一个错误 .

    回复于
  • 0

    您需要导出 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

    回复于

相关问题