Angular4中AppModule声明PublicModule异常及布局组件复用求助

我明白你的需求啦——想要让PublicLayout组件复用Header和Footer，同时不用在app.module.ts里单独声明这三个组件对吧？这在Angular中可以通过创建一个专用的布局模块来完美解决，下面是具体的实现步骤：

1. 确认你的项目结构 #

你的现有结构没问题，整理成更清晰的格式：

app/
└── _layout/
    ├── public-footer/
    │   ├── public-footer.component.html
    │   ├── public-footer.component.ts
    │   └── public-footer.component.css
    ├── public-header/
    │   ├── public-header.component.html
    │   ├── public-header.component.ts
    │   └── public-header.component.css
    └── public-layout/
        ├── public-layout.component.html
        ├── public-layout.component.ts
        └── public-layout.component.css

2. 创建LayoutModule模块 #

在_layout目录下新建一个layout.module.ts文件，把Header、Footer、PublicLayout这三个组件都声明在这个模块里，同时导出PublicLayout组件（让其他模块可以直接使用它）。这样所有布局相关的组件都被封装在这个模块中，不用在AppModule里逐个声明。

layout.module.ts代码如下：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

// 导入布局相关组件
import { PublicHeaderComponent } from './public-header/public-header.component';
import { PublicFooterComponent } from './public-footer/public-footer.component';
import { PublicLayoutComponent } from './public-layout/public-layout.component';

@NgModule({
  declarations: [
    PublicHeaderComponent,
    PublicFooterComponent,
    PublicLayoutComponent
  ],
  imports: [
    CommonModule,
    RouterModule // 因为PublicLayout里用到了router-outlet，所以需要导入RouterModule
  ],
  exports: [
    PublicLayoutComponent // 导出这个组件，让其他模块可以直接使用<app-public-layout>标签
  ]
})
export class LayoutModule { }

3. 在AppModule中导入LayoutModule #

现在你只需要在app.module.ts里导入这个LayoutModule，不用再单独声明任何布局组件：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { LayoutModule } from './_layout/layout.module';
// 导入你的Home、About组件
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent // 只需要声明业务组件，布局组件不用在这里声明
  ],
  imports: [
    BrowserModule,
    LayoutModule, // 导入布局模块
    RouterModule.forRoot([
      {
        path: '',
        component: PublicLayoutComponent, // 直接使用布局组件作为父路由容器
        children: [
          { path: '', component: HomeComponent },
          { path: 'about', component: AboutComponent }
        ]
      }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. 验证你的PublicLayout模板 #

你的public-layout.component.html写法是对的，保持不变即可：

<app-public-header></app-public-header>
<router-outlet></router-outlet>
<app-public-footer></app-public-footer>

这样做的好处是：

• 所有布局相关的组件都被封装在LayoutModule中，实现了组件的模块化管理
• AppModule只需要导入LayoutModule，不用关心内部的Header和Footer组件
• Home、About等业务组件可以通过路由自动嵌入到PublicLayout的router-outlet中，完美实现复用

内容的提问来源于stack exchange，提问作者jaykhatri