Угловой поставщик

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

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

Провайдеры определяют экземпляр объекта, который будет использоваться, или способ его создания. В случае необходимости использования службы в компоненте, внутри компонента может быть определен поставщик, чтобы указать метод, с помощью которого должен быть создан объект службы. Поставщик — это механизм, используемый в Angular для управления зависимостями объекта.

@Component({
  selector: 'app-root',
  template: `<h1>{{data}}</h1>`,
  providers: [MyService]
})

В этом компоненте объект MyService был определен с использованием свойства «поставщики», что делает его пригодным для использования в указанном компоненте.

В Angular доступны различные типы провайдеров:

Поставщик классов, предоставляющий экземпляр класса.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor() { }

  getData() {
    return 'Data from MyService';
  }
}

Использование

import { Component } from '@angular/core';
import { MyClass } from './my.class';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{value}}</h1>
  `,
  providers: [MyClassProvider]
})
export class AppComponent {
  constructor(private myClass: MyClass) {
    this.myClass.getData();
  }
}

Поставщик значений, который предоставляет значение и может использоваться для предоставления постоянного значения.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
  useValue: 'Hello World'
})
export class MyValue {

}

Применение

import { Component } from '@angular/core';
import { MyValue } from './my.value';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{value}}</h1>
  `,
  providers: [MyValueProvider]
})
export class AppComponent {
  constructor(private myValue: MyValue) {}
  get value() { return this.myValue.value; }
}

Factory Provider, который предоставляет функцию, которая возвращает объект при вызове и может использоваться для создания динамических объектов.

import { Injectable, FactoryProvider } from '@angular/core';

@Injectable()
export class MyValue {
  value = 'Hello World';
}

export function myFactory(myValue: MyValue) {
  return {
    getValue() {
      return myValue.value;
    }
  };
}

const MyFactoryProvider: FactoryProvider = {
  provide: 'MyFactory',
  useFactory: myFactory,
  deps: [MyValue]
};

Использование

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{value}}</h1>
  `,
  providers: [MyFactoryProvider]
})
export class AppComponent {
  value: string;
  
  constructor(private myFactory: any) {}
  
  ngOnInit() {
    const myFactoryInstance = this.myFactory;
    this.value = myFactoryInstance.getValue();
  }
}

Существующий поставщик, который предоставляет экземпляр объекта, определенного в другом месте.

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

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
  useValue: 'Hello World',
  multi: true
})
export class MyValue {

}

Применение

import { Component } from '@angular/core';
import { MyValue} from './my.value';

@Component({
  selector: 'app-root',
  template: `
    <h1>{{value}}</h1>
  `
})
export class AppComponent {
  value: string;
  valueProvider: string;
  constructor(private myValue: MyValue) {
    this.value = myValue;
  }
}

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

Сферы использования провайдера

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

Предоставление значений. Его можно использовать для предоставления постоянных или динамически генерируемых значений. Например, если вы хотите использовать постоянное значение внутри компонента, вы можете определить поставщика значений внутри компонента.

Тестируемость. Это упрощает управление и тестирование зависимостей между объектами. Например, если вы хотите протестировать объект службы, вы можете заменить экземпляр объекта службы, предоставляемый тестируемым компонентом, поставщиком.

Создание динамических объектов. Его можно использовать для создания динамических объектов. Например, если вы хотите использовать другой экземпляр объекта внутри компонента, вы можете определить поставщика фабрик внутри компонента, чтобы указать, как должен создаваться объект.

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

ЗАКЛЮЧЕНИЕ

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

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

Провайдеры упрощают управление зависимостями в приложениях Angular и помогают сделать код более читабельным и пригодным для повторного использования. Провайдеры — один из фундаментальных компонентов фреймворка Angular.