0

我正在尝试将 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 { }

页脚.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 { }

此代码不起作用，我不知道出了什么问题。你能帮我一个提示吗？提前致谢。

4

2 回答 2

2

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

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 { }
于 2017-11-28T23:21:19.633 回答
0

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

app.module.ts：

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

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

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

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 { }

希望能帮助到你

于 2017-12-04T16:54:17.327 回答