Question

据我所知，直到角度6，所有@Ngmodule提供程序都注册在根注入器上并在主包中提供，即使只有延迟加载的模块使用它们。

唯一唯一的例外是我们想要create a non singleton services in a component level。

我想创建一个单独的服务，该服务仅对特定模块（而不是根模块）可见，因此不会在主要的主加载包中提供。

在角度6中看到模块将不再需要通过＆＃34;提供商＆＃34; ，而是服务现在将引用该模块。

这可以通过import { Component, OnInit, ViewChild } from '@angular/core'; import { MatStepper } from '@angular/material'; import {FormBuilder, FormGroup, Validators} from '@angular/forms'; import { NgxStepperModule, NgxStepperComponent } from 'ngx-stepper'; @Component({ selector: 'app-registration', templateUrl: './registration.component.html', styleUrls: ['./registration.component.sass'] }) export class RegistrationComponent implements OnInit { @ViewChild('stepperDemo') public steppers: NgxStepperComponent; public selectCampaign(): void { this.steppers.showFeedback('Checking, please wait ...'); this.steppers.next(); } constructor(private _formBuilder: FormBuilder) { } ngOnInit() { } }注释和@Injectable属性来完成。

我没有找到一个很清楚的例子，说明如何添加一个不是＆＃39; root＆＃39;的模块名称，如下所示：

＆＃13;

provideIn

＆＃13;

导入LazyLoaded模块并将其写为＆＃34; MyLocalModule＆＃34;在上面的代码片段中导致循环依赖的WARNING。我可以通过将服务转移到其他模块来解决这个问题，但后来我失去了我的初衷。

搜索引用列表：

https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4

https://jaxenter.com/new-angular6-143995.html

https://www.ngdevelop.tech/angular-6-features/

https://blog.ninja-squad.com/2018/05/04/what-is-new-angular-6/

http://ankitsharmablogs.com/getting-started-with-angular-6-0/

https://www.youtube.com/watch?v=Xr5l7lT--YU

Answer 1

如果按照official docs按照此设置进行循环依赖，似乎存在一些问题：

import { Injectable } from '@angular/core';
import { HeroModule } from './hero.module';
import { HEROES }     from './mock-heroes';

@Injectable({
  // we declare that this service should be created
  // by any injector that includes HeroModule.

  providedIn: HeroModule,
})
export class HeroService {
  getHeroes() { return HEROES; }
}

您可以忽略编译器因模块，服务和组件之间的循环依赖而引发的警告。或者，回退到Angular 5中使用的先前方法。

在延迟加载的模块中将服务注册为提供者，请注意，不应在根应用程序模块中导入延迟加载的模块：

@NgModule({
  imports: [
    RouterModule.forChild([{ path: '', component: LazyComponent }]),
  ],
  declarations: [
    LazyComponent
  ],
  providers: [YourServiceHere]
})
export class LazyLoadedModule { }

Answer 2

要使用较新的语法在特定模块中提供服务，您只需执行以下操作：

import { Injectable } from "@angular/core";
import { YourModule } from "path/to/your.module";

@Injectable({
    providedIn: YourModule
})
export class SomeModuleScopedService {}

参考：https://angular.io/guide/providers#providedin-and-ngmodules

Answer 3

我通过创建一个仅包含服务的中间模块来使其工作。

import { Injectable } from '@angular/core';
import { HeroServiceModule } from './hero.service.module';

@Injectable({
  providedIn: HeroServiceModule,
})
export class HeroService {
}

该模块不需要太多内容

@NgModule({
  imports: [ CommonModule ]
})
export class HeroServiceModule {}

然后，您的常规模块将导入服务模块：

@NgModule({
...
  imports: [
...
     HeroServiceModule
  ]
})
export class HeroModule {}

然后，您可以照常延迟加载HeroModule。这消除了所有循环依赖。

Angular 6 - 创建（非根）模块作用域服务

3 个答案: