延迟加载 - 提供者和模块

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数组中删除服务导入，像您一样在配方模块中导入服务，在其提供者中提供阵列。在此之后使用该服务只需导入组件中的服务（这是您的配方模块的一部分），在组件的构造函数中声明服务，您就可以开始了，为Recipe模块中的任何其他组件重复相同的步骤他们将收到相同的实例。
• 现在，如果要在任何模块中的任何组件中使用imageUploadProvider并接收相同的实例，则必须在根模块中提供它。为此，您只需要在根模块（app.module）中导入服务，并在提供者数组中声明它，就像您之前在app模块中所做的那样：

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

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

Answer 2

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

@Injectable({
  providedIn: 'root'
})

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

你也可以指定一个providedIn: moduleName，如果这对你更好。

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

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