Как лучше всего в Angular 8 использовать данные из службы?

avatar
RoyBarOn
8 августа 2021 в 20:23
432
1
-2

У меня есть приложение, в котором вся архитектура управления состоянием реализована в виде Observable Data Services. Я пытаюсь выяснить, как лучше всего создавать общие списки и словари, которые будут доступны через сервисы. Я знаю, это звучит просто, но, поскольку я новичок в Angular 8, я до сих пор не могу понять все лучшие практики с rxjs.

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

export class ApiService {

 public users =  new BehaviorSubject<any>({‘users’: []});

 constructor(private http: HttpClient}

 public getUsers(){
   return this.http.get(‘/users’).subscribe((res)=>{this.users.next(res)})
 }
}

А вот как я использую список пользователей

export class UsersComponent implements OnInit {

public usersList: BehaviorSubject<any>;

  constructor(public apiService:ApiService) {

    this.usersList = new BehaviorSubject<any>([]);
    this.apiService.users.subscribe((value: any) => {
           
      this.usersList.next(value);
     
    });
  }
}

Теперь я не уверен, что это правильный путь - поскольку логика, похоже, повторяется как в компоненте, так и в сервисе... (здесь я могу ошибаться...) просто подробнее - список пользователей должен быть статическими данными, которые должны создаваться только один раз .

Источник
Heretic Monkey
8 августа 2021 в 20:37
1

Вам не нужен BehaviorSubject в компоненте. Просто используйте тот, на который вы ссылаетесь из this.apiService.users.

Ответы (1)

avatar
The Fabio
9 августа 2021 в 00:12
2

Ответ о том, как обрабатывать данные между компонентами в Angular: использовать сервис

https://angular.io/guide/architecture-services

Команда angular поддерживает очень хороший учебник под названием Tour of Heroes, где они знакомят разработчиков с архитектурой angular и ее основными рабочими процессами данных. Я особенно рекомендую людям закончить последнюю главу, посвященную обработке данных.

Чтобы ответить на ваш вопрос, вкратце, из службы вы не должны подписываться на звонки на конечные точки. в вашем сервисе создайте такие функции:

...
public getUsers(){
   return this.http.get(‘/users’)
 }
...

В ваших компонентах вы создаете Observables для сервисных данных следующим образом:

export class UsersComponent implements OnInit {
...
public usersList$ = this.apiService.getUsers();

...
}

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

<div *ngFor="let user of usersList$ | async">
  <div> {{ user.name }} </div>
  <div> {{ user.email }} </div>
</div>