Question

我正在尝试将Angular 5应用分成模块。工作代码是这个（相关代码）：

app.module.ts ：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FooterComponent } from './path/to/component';

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

app.component.html ：

<app-footer></app-footer>

现在我想使用页脚将其更改为模块（只是更改）：

app.module.ts ：

import { FooterModule } from './path/to/module';

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

footer.module.ts ：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule} from '@angular/router';
import { FooterComponent } from './footer.component';

@NgModule({
  declarations: [FooterComponent],
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: 'footer', component: FooterComponent }
    ])
  ]
})

export class FooterModule { }

这段代码不起作用，我不知道出了什么问题。你能帮我提一下吗？提前谢谢。

Answer 1

一个问题可能是您尝试使用应用程序组件中不再位于同一模块中的页脚组件。只要将内容外包到子模块中，那里声明的组件也只能在此模块范围内访问。如果您想使用其外部的组件，则必须导出。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule} from '@angular/router';
import { FooterComponent } from './footer.component';

@NgModule({
  declarations: [FooterComponent],
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: 'footer', component: FooterComponent }
    ])
  ],
  exports: [FooterComponent]
})

export class FooterModule { }

Answer 2

您应该在app.ts上导入您的模块而不是声明它

app.module.ts：

import { FooterModule } from './path/to/module';

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

并在footer.module上导出FooterComponent footer.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule} from '@angular/router';
import { FooterComponent } from './footer.component';

@NgModule({
  declarations: [FooterComponent],
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: 'footer', component: FooterComponent }
    ])
  ],
  exports: [FooterComponent]
})

export class FooterModule { }

希望有所帮助

模块化Angular 5应用程序

2 个答案: