Angular 5 глобальных компонентов и их сервисы

Question

Просматривая документы Angular, в частности руководство по стилю, они располагают как общий модуль, так и основной модуль. Согласно документам, службы должны быть размещены в основном модуле, а компоненты - в общем модуле. Мой вопрос: есть ли у меня компонент, скажем, пользовательский компонент загрузки файлов, и у него также есть соответствующий сервис, где этот компонент и сервис должны находиться? Кажется, имеет смысл сохранить их вместе, поскольку служба используется вместе с компонентом, однако это не соответствует стандартам Angular. Кто-нибудь сталкивался с этой проблемой?

Answer 1

Поиск до провайдеров и синглтон-сервисов . Обычным образом, что:

• если вы хотите одноэтапную службу, вы должны предоставить ее в корневом модуле, например: router

• если вам нужен экземпляр службы для каждого экземпляра компонента, вы предоставляете эту службу в определении компонента и можете передать этот экземпляр службы всем дочерним компонентам:

  @ Компонент ({ / *. , , * / провайдеры: [UserService] })

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

Answer 2

Это хороший вопрос, и его постоянно спрашивают коллеги из моей компании. Как вы сказали, лучшая практика в официальных документах - иметь CoreModule и SharedModule, каждый из которых отвечает за различные проблемы. В большинстве случаев имеет смысл поместить ваши сервисы в «Ядро», а компоненты / директивы / каналы и т. Д. В «Общий».

Но иногда у нас есть исключения и мы хотим сделать следующее:

1. Служба в SharedModule для управления состояниями / конфигурациями / поведениями для аналога компонентов / директив / каналов
2. Компонент в CoreModule, который существует только на корневом уровне или динамически создается во время выполнения.

Для сценария 1 вы можете использовать устаревший метод forRoot() для вашего модуля, чтобы убедиться, что ваша служба инициализируется только один раз. Также стоит отметить, что с Angular 6 вы можете использовать новый синтаксис provideIn: 'root', который упрощает эту задачу. Вы можете найти много ресурсов в Интернете.

Для сценария 2 вы обычно помещаете его в entryComponents.

Answer 3

Согласно Angular Style Guide, Angular на самом деле не рекомендует предоставлять услуги в SharedModule. Причина в том, что какой бы модуль ни импортировал SharedModule, он получит отдельный экземпляр этой общей службы. Это не совсем приемлемо в случае Stateful Service. Но в вашем случае я не совсем уверен, будет ли Служба содержать какие-либо данные о состоянии. Поэтому я думаю, что для вас должно быть безопасно добавить этот Компонент и этот Сервис в сам SharedModule.

Опять же, учитывая, что эта служба не будет иметь никаких данных о состоянии.

Кроме того, Angular рекомендует предоставлять услуги внутри CoreModule, поскольку рекомендует также импортировать CoreModule только одним модулем (обычно AppModule). Вот почему он также рекомендует создать Guard для предотвращения повторного импорта CoreModule.