Автор оригинала: Matthew Davis.
В этом упражнении мы будем демистифицировать угловую Сервис Принимая простой прагматичный подход к реализации сервиса, который извлекает файл JSON с сервера, используя HttpclientModule Отказ
Понятие услуг – это «конструкторской структуры».
Понятие услуг – это «конструкторской структуры». В конце дня сервис – не что иное, как класс. Что делает это Fancy Объединяется его с инъекцией зависимостей (Di), которая обрабатывает создание и строительство для нас.
По совпадению службы – «синглтоны». Это означает, что они будут созданы только один раз в текущем контексте. Путем внесения службы в нескольких местах, таких как родительский и дочерний компонент, вы можете эффективно разделить состояние объектов.
Почему я должен использовать услугу?
В любое время вы хотите обеспечить повторное использование на логическом уровне, вы должны обернуть его в сервис. Отвержем вашу логику с объема классов компонентов, которые вы поддерживаете «разделение опасений». Делать это будет
Объявление сервиса
NG Generate Service.
/src/app/forms.service.ts:
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable, Subject} from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class FormsService {
public constructor(private httpClient: HttpClient) {
}
public getFormSchema(): Observable {
let subject: Subject = new Subject();
this.httpClient.get('assets/form-schema.json').subscribe((results: any) => {
console.log(results);
subject.next(results);
});
return subject;
}
}
Потребляющий сервис
В этом примере мы будем использовать «инъекцию зависимости», чтобы иметь возможность вызывать наши услуги GetFormschema () методом:
/src/app/ app.component.ts.
import {Component} from '@angular/core';
import {FormsService} from './forms.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public constructor(private formsService: FormsService) {
formsService.getFormSchema().subscribe((results: any) => {
console.log(results);
});
}
}