延迟加载 - 提供程序和模块

Question

我正在将我的应用程序改为延迟加载。我已经完成了页面、管道和指令，但现在轮到 providers/services 和其他一些模块了。

这是我的 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？

Answer 1

如果您使用的是 Angular 6（也可能是 5，但我不这么认为）您可能只想使用：

@Injectable({
  providedIn: 'root'
})

我相信这将按需加载服务，而无需在任何提供程序数组中提供它们，这应该会让您的生活变得更加轻松。这提供了可用于整个应用程序的单例服务。适用于无状态服务。

您也可以指定 providedIn: moduleName 如果这样更适合您。

再说一遍，您不必在模块的提供程序数组中列出服务。

有关更多信息，请参阅 https://angular.io/tutorial/toh-pt4。搜索 providedIn

Answer 2

假设您正在延迟加载您的食谱模块，并且在您的食谱模块中声明了新的食谱组件，它将使用图像 imageUploadProvider 并且该提供程序也将被其他组件使用，这是可能的解决方案：

如果您仅在配方模块内的组件中需要 service/Provider，那么您需要从 app.module 中的提供程序数组中删除服务的导入，在配方模块中导入服务，例如你已经完成了，在它的提供者数组中提供它。在此之后使用该服务只需将服务导入您的组件（它是您的食谱模块的一部分），在组件的构造函数中声明该服务，您就可以开始了，对 Recipe 模块内的任何其他组件重复相同的步骤他们将收到相同的实例。
现在，如果您想在任何模块的任何组件中使用 imageUploadProvider 并接收相同的实例，那么您必须在根模块中提供它。为此，您只需在根模块 (app.module) 中导入服务，并像之前在应用程序模块中所做的那样在提供者数组中声明它：

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

在此之后，您将能够在您想要的任何组件中导入服务，并在其构造函数中声明并使用它们。 您不应将此服务导入任何其他模块并在其提供程序数组中提及它，这将创建一个单独的实例。 如果您正确地执行延迟加载并在组件中正确导入和声明服务，那么此解决方案应该有效。您还可以在空闲时间阅读有关共享服务的信息。

延迟加载 - 提供程序和模块

Lazy loading - Providers and modules

lazy-loading

ionic3

angular