代码之家 › 专栏 › 技术社区 › Dani

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

lazy-loading ionic3 angular

Dani · 技术社区 · 6 年前

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

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?
    };
  }
}

我需要在里面导入这个新模块吗 新建-配方模块 新配方

2 回复 | 直到 6 年前

Danish Aziz 6 年前

假设您正在延迟加载配方模块,并且配方模块中声明了新的配方组件,该组件将使用image imageUploadProvider,并且此提供程序也将由其他组件使用,下面是可能的解决方案:

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

在此之后,您将能够在任何您想要的组件中导入服务,并在它们的构造函数中声明它并使用它们。 您不应该将此服务导入任何其他模块并在其提供程序数组中提及它,这将创建一个单独的实例。

danday74 6 年前

@Injectable({
  providedIn: 'root'
})

我相信这会按需加载服务,而不需要在任何提供商阵列中提供服务,这将使您的生活更加轻松。这为整个应用程序提供了一个单例服务。适用于无状态服务。

也可以指定 providedIn: moduleName 如果这样对你更好的话。

看到了吗 https://angular.io/tutorial/toh-pt4 providedIn