Что такое токен DI?

В Angular, как и в большинстве современных фреймворков, важно управление зависимостями. Dependency Injection (DI) — это паттерн, который позволяет автоматически предоставлять зависимости классу при его создании. Это упрощает тестирование, сокращает связность компонентов и делает ваш код более гибким и поддерживаемым.

Что такое токен DI?

Токен DI – это уникальный идентификатор, который используется для регистрации и получения зависимостей в Angular. Он может быть простым классом, строкой или символом. Когда вы запрашиваете зависимость в конструкторе какого-либо класса, Angular ищет соответствующий токен в своем контейнере зависимостей и возвращает связанную с ним инстанцию.

Почему токены важны?

1. Идентификация зависимости: Когда у вас есть несколько сервисов с одинаковым типом, токены позволяют различать их.
2. Инкапсуляция: Токены помогают скрыть реализацию зависимости и только expose необходимый интерфейс.
3. Гибкость: Можно легко менять реализацию зависимости, не влияя на потребитель.

Примеры токенов в Angular

Простой токен

Рассмотрим пример, где мы создадим сервис и зарегистрируем его с помощью токена.

// my.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class MyService {
  getData() {
    return 'Данные из сервиса!';
  }
}

Теперь создадим компонент, который будет использовать этот сервис:

// app.component.ts
import { Component } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'app-root',
  template: `<h1>{{ data }}</h1>`,
})
export class AppComponent {
  data: string;

  constructor(private myService: MyService) {
    this.data = myService.getData();
  }
}

В этом примере Angular автоматически создает инстанс MyService, потому что он зарегистрирован как сервис с providedIn: 'root'.

Использование токена в виде строки

Иногда может понадобиться использовать строковый токен, особенно когда вы работаете с внешними библиотеками или интеграциями.

// token.ts
import { InjectionToken } from '@angular/core';

export const API_URL = new InjectionToken<string>('apiUrl');

// app.module.ts
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { API_URL } from './token';

@NgModule({
  declarations: [AppComponent],
  providers: [
    { provide: API_URL, useValue: 'https://myapi.com' }
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Теперь компонент, который хочет использовать этот токен, может его инжектировать:

// api.service.ts
import { Injectable, Inject } from '@angular/core';
import { API_URL } from './token';

@Injectable({
  providedIn: 'root',
})
export class ApiService {
  constructor(@Inject(API_URL) private apiUrl: string) {}

  fetchData() {
    console.log(`Fetching data from: ${this.apiUrl}`);
  }
}

Заключение

Понимание токенов DI в Angular является ключевым моментом для эффективного использования системы зависимостей. Используйте токены для идентификации, инкапсуляции и модульности вашего кода. С помощью приведенных примеров вы можете начать применять токены в своих проектах, повышая их структуру и удобство поддержки.