如何在另一個模塊/路由器中使用組件

Question

我正在嘗試使用另一個模塊中的另一個組件，但它在我的路由器插座中不起作用。

應用模塊

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MainModule } from './main/main.module';
import { AppComponent } from './app/app.component';
import { KeypadComponent } from './keypad/keypad.component;
import { routing } from './app.routing';

@NgModule({
  declarations: [
    AppComponent,
    MainComponent,
    KeypadComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    MainModule,
    routing
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

主模塊

import { NgModule } from '@angular/core';
import { routing } from '../app.routing';

import { ProductComponent } from './product/product.component';

@NgModule({
  imports: [
    routing
  ],
  declarations: [ProductComponent]
})
export class MainModule { }

我的問題是，當我嘗試在product.component.html調用鍵盤組件時，它會給我一個錯誤，說它不存在。 但是，當我在main.component.html調用它時，它工作正常。

Answer 1

如果你的組件應該被 app 模塊和主模塊使用，它應該放在主模塊或另一個共享模塊中。 以下示例顯示了如何使用共享模塊。

應用模塊聲明

@NgModule({
  declarations: [
    AppComponent,
    MainComponent,
  ],
  imports: [
    CommonModule,
    MainModule,
    SharedModule,
    routing
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

主模塊聲明

@NgModule({
  imports: [
    CommonModule,
    routing,
    SharedModule
  ],
  declarations: [ProductComponent]
})
export class MainModule { }

共享模塊聲明

@NgModule({
  imports: [ CommonModule ],
  declarations: [ KeypadComponent ],
  exports: [ KeypadComponent ]
})
export class SharedModule { }