Angular4多模块问题

Posted 2023-02-19

【中文标题】Angular4多模块问题

【英文标题】：Angular4 multiple modules issue

【发布时间】：2018-07-31 07:22:58

【问题描述】：

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

从“@angular/platform-b​​rowser”导入 BrowserModule ； 从'@angular/core'导入 NgModule ； 从'./app-routing.module'导入AppRoutingModule； 从'./app.component'导入AppComponent； 从'./layouts/index'导入 LayoutsModule ； @NgModule( 声明：[ 应用组件 ], 进口：[ 浏览器模块， 布局模块， 应用路由模块 ], 提供者：[]， 引导程序：[AppComponent] ) 导出类 AppModule

这是 LayoutsModule

从'@angular/core'导入 NgModule ； 从'./navigation/navigation.component'导入 NavigationComponent ； @NgModule( 声明：[ 导航组件 ], 出口：[ ], 进口：[ ], 提供者：[ ] ) 导出类 LayoutsModule

还有我的 app.component.html

路由器出口>

【参考方案1】：

您需要在您的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

【参考方案2】：

您应该从您的LayoutsModule 导出NavigationComponent，以便它可以用于LayoutsModule。基本上，无论您想暴露以供 Angular 中的另一个模块/系统使用，您都必须将那些 component/directive/pipe 放在 exports 的 exports 元数据选项中，或者更确切地说它可能已经加载通过来自 Angular 路由器的 route 段。

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

不知道为什么您没有收到错误消息。它应该抛出一个错误。