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

Question

我正在将我的应用程序移至延迟加载。我已经完成了页面、管道和指令，但现在轮到提供程序/服务和其他一些模块了。

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

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

• 如果您只需要配方模块内的组件中的服务/提供程序，那么您需要从 app.module 中的提供程序数组中删除服务的导入，像您所做的那样在您的配方模块中导入服务，提供它在它的提供者数组中。在此之后要使用该服务，只需将服务导入您的组件（它们是您的配方模块的一部分），在组件的构造函数中声明该服务，您就可以开始了，对配方模块中的任何其他组件重复相同的步骤他们将收到相同的实例。

• 现在，如果您想在任何模块的任何组件中使用 imageUploadProvider 并接收相同的实例，那么您必须在根模块中提供它。为此，您只需在根模块（app.module）中导入服务，并像之前在应用程序模块中所做的那样在提供程序数组中声明它：

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

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

Answer 2

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

@Injectable({
  providedIn: 'root'
})

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

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

再一次，您不必在模块的 providers 数组中列出服务。

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