Внедрение зависимостей в конструктор компонента

Question

Я очень новичок в Angular и сейчас занимаюсь обучением этому.

Я столкнулся с проблемой, и мне интересно, может ли кто-нибудь помочь мне увидеть ясность.

Это о внедрении зависимостей и создании сервисов.

В качестве упражнения мне нужно было создать два сервиса и внедрить их в другие компоненты, чтобы сделать их пригодными для использования.

Как уже говорилось, внедрение зависимостей может произойти в конструкторе данных компонентов следующим образом:

constructor(private counterService: CounterService) {}

Но в другом случае это вызвало ошибку ( этот конструктор не совместим с angular внедрение зависимостей ) и мне нужно чтобы гуглить и нашел этот метод:

constructor(@Inject(UserService) private userService) {}

Может кто-нибудь объяснить, пожалуйста, в чем разница между обоими? Эти две службы расположены в одной структуре папок. У меня Angular версия 9.

Спасибо!

---

export class CounterService  {
  inactiveToActiveCount: number = 0;
  activeToInactiveCount: number = 0;

  increaseActiveToInactiveCounter() {
    this.activeToInactiveCount = this.activeToInactiveCount +1;
    console.log("Active to inactive: " + this.activeToInactiveCount);
  }

  increaseInactiveToActiveCounter() {
    this.inactiveToActiveCount = this.inactiveToActiveCount +1;
    console.log("Inactive to active: " + this.inactiveToActiveCount);
  }

}

---

import { Injectable } from '@angular/core';
import { CounterService } from './counter.service';

@Injectable()
export class UserService {
  activeUsers = ['Max', 'Anna'];
  inactiveUsers = ['Chris', 'Manu'];

  constructor(private counterService: CounterService) {
    //
  }

  setToInactive(id: number) {
      this.inactiveUsers.push(this.activeUsers[id]);
      this.activeUsers.splice(id, 1);
      this.counterService.increaseActiveToInactiveCounter();
  }

  setToActive(id: number) {
      this.activeUsers.push(this.inactiveUsers[id]);
      this.inactiveUsers.splice(id, 1);
      this.counterService.increaseInactiveToActiveCounter();
  }
}

---

И я использую их в этом компоненте:

import { Component, OnInit, Inject } from '@angular/core';
import { UserService } from '../common/user.service';

@Component({
  selector: 'app-active-users',
  templateUrl: './active-users.component.html',
  styleUrls: ['./active-users.component.css']
})
export class ActiveUsersComponent implements OnInit {
  users: string[];

  constructor(@Inject(UserService) private userService) {
    //
  }

  ngOnInit() {
    this.users = this.userService.activeUsers;
  }

  onSetToInactive(id: number) {
    this.userService.setToInactive(id);
  }
}

Answer 1

При Angular 9 новый компилятор и инструкции времени выполнения используются по умолчанию вместо старого компилятора View Engine. Из-за этого в angular.

добавляется следующее требование. Добавьте декоратор @Injectable ко всему, что вы планируете предоставить или внедрить.

До angular 9 То, что вы написали, действительно. Но теперь у userService есть ссылка на counterService, в которую inturn внедряется в компонент. Таким образом, @Inject требуется, поскольку счетчик службы не добавил @Injectable.

Внедрение службы в другую службу не имеет этого требования, если вы не выходите из другой службы.

https://angular.io/guide/ivy-compatibility-examples

Вы можете проверить это ссылка для понимания проблем и исправлений, рекомендованных группой при переносе, поскольку версия v8 по-прежнему популярна.