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

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中的providers数组中删除服务的导入，像您已经做的那样将服务导入到您的配方模块中，在它的Provider数组中提供它。在此之后，要使用该服务，只需在组件中导入服务(它是配方模块的一部分)，在组件的构造函数中声明服务，您就可以了，对配方模块中的任何其他组件重复相同的步骤，它们将接收相同的实例。
• 现在，如果您想在跨任何模块的任何组件中使用imageUploadProvider并接收相同的实例，那么您必须在根模块中提供它。为此，您只需导入根模块(app.module)中的服务，并在提供者数组中声明它，就像前面在应用程序模块中所做的那样： import { ImageUploadProvider } from "../../services/image-upload/image-upload"; ... providers: [ ImageUploadProvider ]

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

Answer 2

如果您使用的是角6(可能也在5中，但我不这么认为)，您可能想简单地使用：

@Injectable({
  providedIn: 'root'
})

我相信这将在没有在任何供应商数组中提供的情况下按需加载服务，这将使您的生活更加轻松。这提供了对整个应用程序可用的单例服务。适合无状态服务。

如果providedIn: moduleName对您更好，也可以指定它。

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

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