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

如果您正在使用Angular 6（也可能在Angular 6中，但我认为不是），您可能需要简单地使用：

@Injectable({
  providedIn: 'root'
})

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

如果更适合您，您还可以指定一个providedIn: moduleName。

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

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

Answer 2

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

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

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

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

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

2 个答案: