Я работал над практическим проектом с использованием Angular 8 , где я создавал сервис и больше думал о том, как реализовать принципы SOLID . Я решил иметь интерфейс для определения моего сервиса и класс для реализации логики. С этим дизайном все было в порядке, но у меня возник вопрос: «Как я могу реализовать внедрение зависимостей с помощью моего компонента Angular?»
В этом примере я собираюсь использовать абстрактный класс. Давайте создадим абстрактный класс с именем IGreetingsService. Это будет использоваться как интерфейс с методом приветствия.
Машинопись
1
export abstract class IGreetingsService {
2
constructor() { }
3
abstract greeting(): String;
4
}
Теперь давайте создадим класс GreetingsServiceImpl. Этот класс реализует абстрактный класс.IGreetingsService
Машинопись
xxxxxxxxxx
1
export class GreetingsServiceImpl implements IGreetingsService {
2
constructor() { }
3
greeting(): String{
4
return "Pruebaa";
5
};
6
}
На данный момент у нас есть обычный класс для использования в качестве службы, но нам нужно добавить аннотацию @Injectable. Мы должны поставить это на IGreetingsService.
Машинопись
x
1
@Injectable({
2
providedIn: 'root',
3
useClass: GreetingsServiceImpl,
4
})
5
export abstract class IGreetingsService {
6
constructor() { }
8
abstract greeting(): String;
10
}
Вам также может понравиться:
Angular 9: Чего ожидать в новой версии Angular .
Магия в собственности useClass. Этот класс используется платформой Angular, чтобы знать, какой конкретный класс нужно использовать для внедрения зависимостей, когда вы используете IGreetingsServiceабстрактный класс. Таким образом, мы готовы использовать наш сервис в качестве углового компонента.
Машинопись
xxxxxxxxxx
1
@Component({
2
selector: 'my-app',
3
templateUrl: './app.component.html',
4
styleUrls: [ './app.component.css' ]
5
})
6
export class AppComponent {
7
name: String;
8
constructor(private service: IGreetingsService ) {
9
this.name = this.service.greeting();
10
}
11
12
}
В настоящий момент для создания экземпляра AppComponentAngular автоматически создает экземпляр GreetingsServiceImpl вместо IGreetingsService. (Помните IGreetingsService, это абстрактный класс).
Такой подход может помочь вам в нескольких ситуациях; например, подумайте о сервисе, использующем сервисы REST для получения некоторых данных, но теперь есть новое требование, и вам нужно получать те же данные из хранилища сеансов или локального хранилища. Вы можете создать новый класс, реализующий ваш абстрактный класс, и обновить свойство, useClassчтобы ссылаться на ваш новый класс. Другая ситуация может возникнуть, если вам потребуется другая реализация в производственных средах и средах тестирования.
Вы можете найти полный исходный код здесь: https://stackblitz.com/edit/angular8-injectiondependency-interface .
Последнее замечание : вы можете определить поставщика в аннотации определения компонента, чтобы внедрить конкретную реализацию вашего сервиса.
Машинопись
x
1
@Component({
2
selector: 'my-app',
3
templateUrl: './app.component.html',
4
styleUrls: [ './app.component.css' ],
5
providers :[{ provide: IGreetingsService, useClass: GreetingsServiceImpl }]
6
})