Angular 2+：在构造函数调用中注入服务有困难

Question

I'm migrating the codebase of https://github.com/oppia/oppia from AngularJS to Angular 2+. We have a lot of services, about 300+. I migrated a filter normalize-whitespace to Angular 2+. Now, I was migrating the service Validator Service which uses this filter.

import { AlertsService } from 'services/AlertsService';
import { AppConstants } from 'app.constants';
import { NormalizeWhitespacePipe } from
  'filters/string-utility-filters/normalize-whitespace.pipe.ts';
import { UtilsService } from 'services/UtilsService.ts';

import { Injectable } from '@angular/core';
import { downgradeInjectable } from '@angular/upgrade/static';

@Injectable({
  providedIn: 'root'
})
export class ValidatorsService {
  private normalizeWhitespace: NormalizeWhitespacePipe = (
    new NormalizeWhitespacePipe(new UtilsService()));
  constructor(private alertsService: AlertsService) {}

This is the starting part of the Validator Service. The Normalize WhiteSpace filter depends on UtilsService and hence I need to pass that as a constructor argument since its injected in the filter. The question is if UtilsService too depends on other services say A and B, and A depends on others services and so on, don't you think the initialisation of normalizeWhitespace would be too difficult!

Is there any solution to this problem?

Thanks!

Answer 1

You don't need to do this

  private normalizeWhitespace: NormalizeWhitespacePipe = (
    new NormalizeWhitespacePipe(new UtilsService()));

in order to initialize a service.

It's quite simple: you just need to declare all the dependencies always in the constructor (as you are doing with AlertsService ), then angular will inject to each service what is needed based on that .

Just make sure that all the services that should be globally available are provided in the root app.module, as you are doing with ValidatorsServices with

@Injectable({
  providedIn: 'root'
})

Here's the official documentation .