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时，我遇到了这个错误： rejection：错误：模板解析错误：＆＃39;应用重复使用的组分＆＃39;不是一个已知的元素。

Answer 1

如果您有多个模块，并希望将您的组件共享到其他模块，则需要export

像这样

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

Answer 2

第1步：确保将Reusable **组件**从ReusableModule导出。

第2步：如果您不希望在LazyLoaded Module中导入ReusableModule，而是在** SharedModule **和** RE-EXPORT **中从sharedModule导入ReusableModule。由于模块的私有范围仅限于模块。

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



@NgModule({
  imports:      [ ReusableModule ],
  declarations: [ someImportsHere ],
  exports:  [ ReusableModule, "IF ANY OTHER COMPONENST TO EXPORT FROM SHARED MODULE"]
})
export class SharedModule { }


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

Answer 3

如果延迟加载模块，则无法在其他模块中使用。您必须在共享模块中移动该组件，然后将该模块导入您要在其中使用该组件的模块中。

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

3 个答案: