Ленивая загрузка - провайдеры и модули - PullRequest
Новая
       15

Ленивая загрузка - провайдеры и модули

0 голосов
/ 30 августа 2018

Я перевожу мое приложение в режим отложенной загрузки. Я закончил со страницами, каналами и директивами, но теперь очередь за провайдерами / услугами и некоторыми другими модулями.

Это был мой app.module: 

...
import { FileUploadModule } from "ng2-file-upload";
import { CloudinaryModule } from "@cloudinary/angular-5.x";
import * as cloudinary from "cloudinary-core";
import { ImageUploadProvider } from "../services/image-upload/image-upload";
...
imports: [
 ...
 FileUploadModule,
 CloudinaryModule.forRoot(cloudinary, {
   cloud_name: "cloudName",
   upload_preset: "cloudCode"
  }),
  ...
]
providers: [
 ...
 ImageUploadProvider
  ...
]

Теперь эти ссылки удалены из этого файла.

Мне нужно все это на моем new-recipe компоненте. Для этого я добавил это в new-recipe.module: 

import { ImageUploadProvider } from "../../services/image-upload/image-upload";
...
providers: [
    ImageUploadProvider
  ]

Что еще мне нужно? Я также создал image-upload.module, но не уверен, что это правильно: 

import { NgModule, ModuleWithProviders } from '@angular/core';
import { FileUploadModule } from "ng2-file-upload";
import { CloudinaryModule } from "@cloudinary/angular-5.x";
import * as cloudinary from "cloudinary-core";
import { ImageUploadProvider } from '../services/image-upload/image-upload';

@NgModule({
  imports: [
    FileUploadModule,
    CloudinaryModule.forRoot(cloudinary, {
      cloud_name: "cloudName",
      upload_preset: "cloudId"
    })
  ],
  exports: [
    CloudinaryModule
  ]
})

export class ImageUploadProviderModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: ImageUploadProviderModule,
      providers: [ImageUploadProvider] // <-- is this necessary?
    };
  }
}

Нужно ли импортировать этот новый модуль внутри new-recipe.module и удалить ссылку на провайдера? Как я могу получить доступ из своих функций в new-recipe к this.imageUploadProvider?

Ответы [ 2 ]

0 голосов
/ 04 сентября 2018

Предполагается, что вы лениво загружаете свой модуль рецептов, и в вашем модуле рецептов объявляется компонент new-recipe, который будет использовать imageUploadProvider, и этот поставщик также будет использоваться другими компонентами, вот возможное решение:

  • Если вам нужен сервис / провайдер только в компонентах внутри вашего модуля рецептов, то вам нужно удалить импорт сервиса из массива провайдеров в app.module, импортировать сервис в свой модуль рецептов, как вы это сделали, предоставить его в массиве провайдеров. После этого, чтобы использовать сервис, просто импортируйте сервис в ваши компоненты (которые являются частью вашего модуля рецепта), объявите сервис в конструкторе компонента, и вам будет хорошо, повторите этот же шаг для любого другого компонента внутри модуля рецепта. и они получат один и тот же экземпляр.

  • Теперь, если вы хотите использовать imageUploadProvider в любом компоненте любого модуля и получить тот же экземпляр, вам придется предоставить его в корневом модуле. Для этого вам просто нужно импортировать сервис в ваш корневой модуль (app.module) и объявить его в массиве провайдеров, как вы делали это ранее в вашем модуле приложения:

    import { ImageUploadProvider } from "../../services/image-upload/image-upload"; ... providers: [ ImageUploadProvider ]

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

0 голосов
/ 30 августа 2018

Если вы используете Angular 6 (может быть и в 5, но я так не думаю), вы можете просто использовать: 

@Injectable({
  providedIn: 'root'
})

Я полагаю, что это будет загружать услуги по требованию без предоставления их в массиве провайдеров, что должно значительно облегчить вашу жизнь. Это обеспечивает единый сервис, доступный для всего приложения. Подходит для лиц без гражданства.

Вы также можете указать providedIn: moduleName, если это работает лучше для вас.

Еще раз, вам не нужно перечислять сервис в массиве провайдеров модуля.

См. https://angular.io/tutorial/toh-pt4 для получения дополнительной информации. Искать providedIn

...