angular - 如何在其他延迟加载模块中使用模块中的组件

Question

我正在尝试在延迟加载模块的其他组件中使用特定模块中的一些组件。

我将向您展示示例以更好地理解!

project:
app.module
app.route
shared.module

modules/
    lazy-load-1.module
    lazy-load-2.module
    reusable.module

在每个模块内部我都导入了一个shared.module。 在 reusable.module 内部，我有一些组件要在其他模块内部使用，但其他模块是延迟加载模块。

例如:

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

@NgModule({
  imports:      [ SharedModule, ReusableModule ],
  declarations: [ someImportsHere ],
  bootstrap: [AppComponent],
})
export class AppModule { }

const appRoutes: Routes = [
  {
    path: 'lazy-load-1',
    loadChildren: 'app/modules/lazy-load-1/lazy-load-1.module#LazyLoad1Module',
  },
  {
    path: 'lazy-load-2',
    loadChildren: 'app/modules/lazy-load-2/lazy-load-2.module#LazyLoad2Module',
  },
  {
    path: '**',
    redirectTo: 'lazy-load-1'
  }
];


@NgModule({
   exports: [
      RouterModule
   ],
   imports: [
      RouterModule.forRoot(appRoutes, { useHash: true })
   ]
})

export class AppRouter { }

模块/

@NgModule({
  imports:      [ SharedModule ],
  declarations: [ TestComponent ],
})
export class LazyLoad1Module { }

@NgModule({
  imports:      [ SharedModule ],
  declarations: [ OtherTestComponent ],
})
export class LazyLoad2Module { }

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

我正在尝试上面类似的方法，但是当我尝试在 LazyLoad 模块内使用 ReusableComponent 时，我收到此错误: 拒绝:错误:模板解析错误: “app-reusable-component”不是已知元素。

Answer 1

如果您有多个模块并希望将您的组件共享给其他模块，您需要导出它

像这样

@NgModule({
  declarations: [your_component],
  exports: [your_component]
})