angular7 ПРЕДУПРЕЖДЕНИЕ при обнаружении циклической зависимости:

Question

Я пытаюсь зарегистрировать сервис для определенного модуля с помощью атрибута 'provideIn' в моем приложении angular7.

test.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TestComponent} from './test.component'

@NgModule({
  declarations: [TestComponent],
  imports: [
    CommonModule
  ],
  exports: [TestComponent]
})
export class TestModule { }

test.component

import { Component, OnInit } from '@angular/core';
import { TestServiceService } from '../test-service.service';
@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {

  constructor(public service: TestServiceService) { }

  ngOnInit() {
  }

}

test-service.ts

import { Injectable } from '@angular/core';
import { TestModule } from './test/test.module';

@Injectable({
  providedIn: TestModule
})
export class TestServiceService {
  val = 3;
  constructor() { }

  getDetails() {
    return this.val;
  }
}

, когда я запускаю свое приложение, отображается сообщение об ошибке ниже

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[TestComponent -> TestServiceService]: 
  StaticInjectorError(Platform: core)[TestComponent -> TestServiceService]: 
    NullInjectorError: No provider for TestServiceService!

, когда я изменяю значение атрибута provideIn на «root», все работает нормально. Как я могу зарегистрировать сервис для определенного модуля с помощью атрибута «provideIn» в angular7?

Answer 1

Измените test.component на это:

import { Component, OnInit } from '@angular/core';
import { TestServiceService } from '../test-service.service';
@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
  providers : [TestServiceService]
})
export class TestComponent implements OnInit {

  constructor(public service: TestServiceService) { }

  ngOnInit() {
  }

}

, и если вы хотите иметь один экземпляр службы в модуле, измените test.module.ts на это:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TestComponent} from './test.component'

@NgModule({
  declarations: [TestComponent],
  imports: [
    CommonModule
  ],
  providers :[TestServiceService ],
  exports: [TestComponent]
})
export class TestModule { }

doодин из них

Answer 2

TestService должен зависеть от TestModule, чтобы использовать предоставляемый модуль для предоставления услуги модулю.Это создает циклическую зависимость, потому что TestModule должен зависеть от TestComponent, который зависит от TestService.Определите провайдера в модуле так, чтобы модуль зависел от компонента и услуги.

@NgModule({
  declarations: [TestComponent],
  imports: [
    CommonModule
  ],
  providers: [
    TestService
  ],
  exports: [TestComponent]
})
export class TestModule { }

Определите службу как Injectable, и установите для обеспеченного входа значение null.

@Injectable({
  providedIn: null
})
export class TestServiceService {
  val = 3;
  constructor() { }

  getDetails() {
    return this.val;
  }
}