Как лучше всего делиться часто используемыми компонентами в Angular 4+?

Question

Приложение My Angular настроено с угловой маршрутизацией и отображает различные компоненты в зависимости от URL. Шаблоны для верхнего колонтитула, навигации, нижнего колонтитула и часто используемых модалов определяются в шаблоне корневого приложения. Здесь также указан тег <router-outlet>.

Как лучше всего делиться компонентами, объявленными в шаблоне моего корневого приложения, с различными компонентами, которые будут загружены в <router-outlet>? Например, предположим, что следующий шаблон является моим корневым шаблоном:

<header-component></header-component>
<router-outlet></router-outlet>
<footer-component></footer-component>
<loading-dialog-component></loading-dialog-component>

Компоненты Component1 и Component2 загружаются с использованием маршрутизации, указанной в объявлении моего модуля как таковой:

appRoutes: Routes = [
{ path: 'component1', component: Component1 },
{ path: 'component2', component: Component2 }
];

Я хотел бы получить доступ к <loading-dialog-component> из Component1.component.ts, а также из Component2.component.ts. Каков наилучший способ сделать это?

Answer 1

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

Общий модуль:

1. импортирует CommonModule, потому что компонент модуля нуждается в общих директивах.
2. объявляет и экспортирует SharedComponent, SharedDirective и SharedPipe.
3. повторно экспортирует CommonModule и FormsModule, так что любой другой модуль, который импортирует этот SharedModule, получает доступ к директивам, таким как NgIf из CommonModule, и может связываться с директивой [(ngModel)] из FormsModule.

ПРИМЕЧАНИЕ. Несмотря на то, что SharedModule может не потребоваться импортировать FormsModule, SharedModule по-прежнему может экспортировать FormsModule, не внося его в список своих импортов. Таким образом, вы можете предоставить другим модулям доступ к FormsModule без необходимости импортировать его непосредственно в любой другой модуль вашего приложения.

Рассмотрим следующий модуль из воображаемого приложения:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { SharedComponent } from './shared.component';//just an example
import { SharedDirective } from './shared.directive';
import { SharedPipe } from './shared.pipe';

@NgModule({
 imports:      [ CommonModule ],
 declarations: [ SharedComponent , SharedDirective , SharedPipe ],
 exports:      [ SharedComponent , SharedDirective , SharedPipe ,
                 CommonModule, FormsModule ]
})
export class SharedModule { }

Затем импортируйте ваш общий модуль в модуль, которому нужны общие компоненты:

@NgModule({
  imports: [
    SharedModule
  ],
  declarations: [
      //your declared modules
  ]
})
export class ConsumerOfSharedComponentsModule { }