1

我想将该providedIn选项引用到提供可声明和依赖项的 Angular 模块。我创建了一个附加模块SharedModule作为惰性模块的子模块，LazyModule以便它可以用作我想要提供的惰性服务的“锚”（CounterService在我的例子中）。我一直在遵循本指南来实现它，但显然做错了什么。另外，我做了一个小计划，但请查看StackBlitz以查看完整示例。

 Eager Part                                        Lazy Loaded Module

 +----------------------------------------------+  +--------------------------------------+
 |Routes:                                       |  | @NgModule({                          |
 |                                              |  |   imports: [SharedModule]            |
 |{                                             |  | }                                    |
 |  path: 'lazy',                               |  | export class LazyModule {}           |
 |  loadChildren: './lazy/lazy.module#LazyModule|  |                                      |
 |}                                             |  |                                      |
 +----------------------------------------------+  | SharedModule                         |
                                                   | +----------------------------------+ |
                                                   | |@NgModule({                       | |
                                                   | |  declarations: [SharedComponent],| |
                                                   | |  exports: [SharedComponent]      | |
                                                   | |})                                | |
                                                   | |export class SharedModule {}      | |
                                                   | +----------------------------------+ |
                                                   |                                      |
                                                   |                                      |
                                                   | LazyService                          |
                                                   | +----------------------------------+ |
                                                   | |@Injectable({                     | |
                                                   | |  providedIn: SharedModule        | |
                                                   | |})                                | |
                                                   | |export class CounterService {     | |
                                                   | |  counter = 0;                    | |
                                                   | |}                                 | |
                                                   | +----------------------------------+ |
                                                   |                                      |
                                                   +--------------------------------------+

4

1 回答 1

1

正如您引用的文章提到的，您需要在自己的模块中定义服务以避免循环依赖问题。

计数器.module.ts

import { NgModule, ModuleWithProviders } from "@angular/core";


@NgModule({
})
export class CounterModule {}

柜台服务.ts

import { Injectable } from '@angular/core';
import { CounterModule } from "./counter.module";

@Injectable({
  providedIn: CounterModule
})
export class CounterService {
  counter = 0;
}

在共享模块中导入计数器模块。 shared.module.ts

@NgModule({
  imports: [
      CounterModule
  ],
  declarations: [SharedComponent],
  exports: [SharedComponent]
})
export class SharedModule {}

这是工作堆栈闪电战：https ://stackblitz.com/edit/providedin-module-wglojs

于 2020-02-09T19:00:29.737 回答