Каким образом лучше обновлять данные в Angular2 приложении?

Question

[parliament_dev]

У меня есть компонент со списком компаний, и я загружаю формы для редактирования или добавления в `router-outler`

companies.component.html

    <div class="row">
      <div class="col-md-6">
        <app-company-list></app-company-list>
      </div>
      <div class="col-md-6">
        <router-outlet></router-outlet>
      </div>
    </div>

если я нажимаю на какой-то пункт из списка то я вижу форму для создания или редактирования компании, ниже сабмит метод для форм

company.edit.component

    ...
      onSubmit(){
        if (this.isNew){
          this.companyService.addCompany(this.companyForm.value).subscribe((data) => { 
            this.navigateBack(data.id);
            this.companyService.refresh();
          });
    
        } else {
          this.companyService.editCompany(this.companyForm.value, this.company.id).subscribe((data) => {
            this.companyService.refresh();
            this.navigateBack(this.company.id);
          })
    
        }
      }....

После сабмита я использую this.companyService.refresh(); для обновления списка компаний

ниже companyService и функции для добавления компаний и рефреш функция использую EventEmitter

import { Injectable, EventEmitter } from '@angular/core';
    import { Angular2TokenService } from 'angular2-token';
    import { Company } from './company';
    import { Observable } from 'rxjs/Rx';
    import { Headers, Http, Response } from '@angular/http';
    
    import "rxjs/Rx"
    
    @Injectable()
    export class CompanyService {
      companiesChanged = new EventEmitter();
    
      private company: Company;
      private companies: Company[] = [];
    
      constructor(private tokenService: Angular2TokenService) { }
    
      getCompanies(){
        return this.tokenService.get('companies').map((response: Response) => response.json())
      }
    
      getCompany(companyId: number){
        return this.tokenService.get('companies/' + companyId).map((response: Response) => response.json())
      }
    
      addCompany(company: Company){
        return this.tokenService.post('companies', company).map((response: Response) => response.json())
      }
    
      editCompany(company: Company, companyId: number){
        return this.tokenService.put('companies/' + companyId, company).map((response: Response) => response.json())
      }
    
      deleteCompany(company: Company){
        return this.tokenService.delete('companies/' + company.id).map((response: Response) => response.json())
      }
    
      refresh(){
        this.companiesChanged.emit(true);
      }
    }

ниже код компонента компаний

import { Component, OnInit } from '@angular/core';
    import { CompanyService } from './../company.service';
    import { Company } from './../company';
    
    @Component({
      selector: 'app-company-list',
      templateUrl: './company-list.component.html'
    })
    
    export class CompanyListComponent implements OnInit {
      companies: Company[] = [];
      ownCompanies: Company[] = [];
    
      constructor(private cmpService: CompanyService) { }
    
      ngOnInit() {
        this.getCompanies();
        this.cmpService.companiesChanged.subscribe(
          (data) => {
            this.getCompanies();
          }
        )
      }
   
    
      private getCompanies(){
        this.cmpService.getCompanies().subscribe(data => this.companies = data);
      }
    
    }

также я использую `refresh` в другом компоненте, который находить в навбаре

import { Component, OnInit, EventEmitter, Output } from '@angular/core';
    import { CompanyService } from './../company.service';
    import { Company } from './../company';
    
    @Component({
      selector: 'app-company-dropdown',
      templateUrl: './company-dropdown.component.html'
    })
    
    export class CompanyDropdownComponent implements OnInit {
      @Output() mainCompanyChanged = new EventEmitter();
    
      companies: Company[] = [];
    
      constructor(private cmpService: CompanyService) { }
    
      ngOnInit() {
        this.getCompanies();
        this.cmpService.companiesChanged.subscribe(
          (data) => {
            this.getCompanies();
          }
        )
      }
    
      private getCompanies(){
        this.cmpService.getCompanies().subscribe(data => this.companies = data);
      }
    }

также я использую this.companyService.refresh();` после создания, обновления или удаления компаний из списка компаний.
Вопрос. Хороший ли это метод для обновления списка компаний? меня смущает то что если б например у меня было б 10 компонетов с компаниями, то нужно б было делать 10 гет запросов для обновления списка. Есть ли более эффективный метод? И правильный ли вообще у меня подход?

Answer 1

[Артем Кустиков]

В чем тайный смысл хранения двух списков компаний в разных компонентах?
Вся логика и данные должны быть только в сервисе который на каждое обновление сам должен запускать refresh (в идеале еще и с debounce)
constructor() {
this.refresh();
}
add(company) {
if (!company.valid())
return this.invalidResult();

let sub =
this.http.post(this.endpoint, company)
.map(r => r.json())
.do( r => {
this.companies.push(r);
this.loaded.emit(this.companies);
this.refresh();
});

return sub;
}

refresh() {
this.http.get(this.endPoint).debounce(1000)
// map to json()
.subscribe(r => {
this.companies = r;
this.loaded.emit(this.companies);

})
}

Дальше подписывается везде на loaded и во всем приложении пользуетесь один и всегда валидность лист компаний. Только не забывайте подписаться на add/delete, а то запросы не пойдут.