Как использовать компоненты из модулей в других ленивых загрузочных модулях

Question

Я пытаюсь использовать некоторые компоненты из определенного модуля внутри других компонентов из модулей ленивой загрузки.

Я покажу вам пример для лучшего понимания!

project:
app.module
app.route
shared.module

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

внутри каждогоМодуль, который я импортировал shared.module.внутри модуля reusable.module у меня есть некоторые компоненты, которые будут использоваться внутри других модулей, но этот модуль является модулями с отложенной загрузкой.

ex:

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

modules /

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

Я пытаюсь что-то подобное выше, но когда я пытаюсь использовать ReusableComponent внутри модулей LazyLoad, я получаю эту ошибку: rejection: Ошибка: Ошибки синтаксического анализа шаблона: 'app-reusable-component' не является известным элементом.

Answer 1

В случае лениво загруженных модулей нельзя использовать другие модули.Вы должны переместить этот компонент в общий модуль и затем импортировать этот модуль в тот модуль, в котором вы хотите использовать этот компонент.

Answer 2

• Шаг 1: убедитесь, что повторно используемые ** компоненты ** экспортированы из ReusableModule.

• Шаг 2: Если вы не хотите импортировать ReusableModule в модуль LazyLoaded, а вместо этого в ** SharedModule** и ** RE-EXPORT ** ReusableModule из sharedModule.Поскольку модули имеют частную область действия, ограниченную модулем.

  @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

если у вас есть несколько модулей и вы хотите поделиться своим компонентом с другими модулями, вам нужно export это

вот так

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