Использование службы данных для централизации данных и вызовов HTTP в Angular

Ах, ладно, так что я думаю, что лучше понимаю, я думаю, что лучший способ сделать это, по-прежнему, DataService с субъектами. На самом деле это то, что RXJS делает лучше всего.

Шаблон списка компонентов:

<ul *ngFor="let item of list"> 
  <li (click)="onClick(item)"> 
    <span>{{ item.date } </span>
    <span>{{ item.text }}</span> 
  </li>
</ul>

export class ListComponent implements OnInit {

  list: Item[] = [];

  ngOnInit() {
    this.httpService.getItems().subscribe(val => {
      this.list = val;
    });
  }

  onClick(item: item): void {
    this dataService.updateItemListSubject(item);
    // navigate to route
  } 
}

Обратите внимание, что вам больше не нужен onDestroy и список подписки. HttpClient сделает это за вас

export class DataService {

  private itemSubject = new Subject<Item>();

  getItemSubject(): Observable<Item> {
    return this.itemSubject.asObservable();
  }

  updateItemSubject(item: Observable<Item>): void {
    this.itemSubject.next(item);
  }

}

Шаблон компонента ItemDetail

<div>
  {{item$ | async}}
</div>

export class ItemDetail implements OnInit {
  item$: Observable<Item>

  ngOnInit() {
    this.item$ = this.dataService.getItemSubject();
  }
}

export class HttpService {
  // normal stuff
}

Извините, что так долго.

Наличие DataService для выполнения Http-вызовов, вероятно, будет усложнено где-то в будущем и требует, чтобы DataService знал о приложении больше, чем следовало бы. Вот почему я выполняю вызовы Http в родительском компоненте, а затем присваиваю ответ значению в DataService, как показано выше.

Преимущество использования RXJS заключается в том, что везде, где вы используете данные через асинхронный канал или подписку, вы будете получать уведомления каждый раз, когда происходит изменение. Это также избавит вас от необходимости беспокоиться о сценарии, когда вы получаете список из DataService и случайно делаете list.splice(2), и это ломает все, потому что вы забыли, что список используется везде.