延迟加载-提供程序和模块 [英] 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模块中声明了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中的providers数组中删除服务的导入，像完成操作一样在配方模块中导入服务，提供它在它的providers数组中.使用服务后，只需将服务导入您的组件(属于配方模块的一部分)中，在组件的构造函数中声明该服务，您就可以开始使用了，对Recipe模块中的任何其他组件重复相同的步骤他们将收到相同的实例.

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

• 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"; ... providers: [ ImageUploadProvider ]

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

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

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屋！