延迟加载 - 提供程序和模块 [英] Lazy loading - Providers and modules

问题描述

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

I'm moving my app to lazy loading. I'm done with pages, pipes and directives but now it's the turn of providers/services and some other modules.

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

现在，这些引用已从此文件中删除.

Now, these references are removed from this file.

我的 new-recipe 组件需要所有这些.为此，我将其添加到 new-recipe.module:

I need all of this on my new-recipe component. For that I added this into new-recipe.module:

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

我还需要什么?我还创建了一个 image-upload.module 但不确定这是否正确:

What else do I need? I also created a image-upload.module but not sure if this is correct:

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?

Do I need to import this new module inside new-recipe.module and remove the provider reference? How can I access then from my functions in new-recipe to this.imageUploadProvider?

推荐答案

假设你正在延迟加载你的 recipe 模块，并且在你的 Recipe 模块中声明了 new-recipe 组件，它将使用图像 imageUploadProvider 并且这个提供程序也将被使用通过其他组件，这是可能的解决方案:

Assuming you are lazily loading your recipe module, and new-recipe component is declared in your Recipe module which will use the image imageUploadProvider and this provider will also be used by other components, here is the possible solution:

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

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

• If you need the service/Provider only in components inside your recipe module, then you need to remove import of the service from the providers array in app.module, import the service in your Recipe Module like you have done, provide it in it's providers array. After this to use the service simply import the service in your components(which are part of your recipe module), declare the service in the component's constructor and you'll be good to go, repeat the same step for any other component inside Recipe module and they will receive the same instance.

• Now If you want to use the imageUploadProvider in any component across any module and receive the same instance then you'll have to provide it in the root module. For that, you simply need to import the service in your root module(app.module) and declare it in the providers array like you did in your app module earlier:

import { ImageUploadProvider } from "../../services/image-upload/image-upload";...提供者:[图像上传提供者]

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

After this, you will be able to import the service in any component you want and declare it in their constructor and use them. You should not import this service into any other module and mention it in their providers array, this will create a separate instance. If you are doing lazy loading properly and import & declare the service correctly in your components then this solution should work. You can also give a read about shared services in your free time.

这篇关于延迟加载 - 提供程序和模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！