Вызов метода из другого компонента для синхронизации данных

Question

Задача

Я не могу обновить переменную и, таким образом, выбрать раскрывающийся список в club-list-component после создания клуба в create-club-component

.

Контекст:

Я разрабатываю приложение, которое случайным образом выбирает человека из команды, из клуба. Сначала я сделал 1 компонент, который завершил всю функциональность, но поскольку это было бы уродливо, я хотел разделить различные компоненты и функции.

Что я пробовал:

Я протестировал функциональность и выпадающий список обновляется после создания клуба, если весь код содержится в 1 компоненте.

Фрагменты кода

У меня есть следующие фрагменты кода (некоторые оставлены для удобства чтения):

Create-club.component.ts:

 @Input() clubDetails = {name: ''};

createClub() {
    this._clubService.createClub(this.clubDetails).subscribe((data: {}) => {
    });
    alert('Club Created');
  }

клуб-list.component.ts:

  public clubs = [];

  ngOnInit() {
    this.refreshClublist();
  }

  refreshClublist() {
    this._clubService.getClubs().subscribe(data => this.clubs = data);
  }
}

клуб-list.component.html

<div>
  <div class="alert alert-primary">
    Select a club from the list
  </div>
  <select class="form-control">
    <option *ngFor="let club of clubs" [value]="club.id">
      {{club.name}}
    </option>
  </select>
</div>

Что я пытаюсь архивировать: Как только я создаю свой клуб из всплывающего модального окна в create-club.component.html, я хочу иметь выпадающий список в club-list.component.html для обновления

На мой взгляд, лучшим вариантом будет:

1. [club-list-component] ngOnInit (refreshClublist ()) {}
2. [создать-club.component] createClub ()
3. [club-list-component] refreshClublist () (вызывается после createClub () на шаге 2)

Answer 1

Вы можете достичь этого, используя Observable BehaviorSubject

Create-club.component.ts:

private clubList = new BehaviorSubject(null);
public clubList$ = this.clubList.asObservable();

createClub() {
    this._clubService.createClub(this.clubDetails).subscribe((data: {}) => {
       this.clubList.next(data);
    });
    alert('Club Created');
}

клуб-список-компонент:

ngOnInit(){
  this.clubList$.subscribe(updatedList=>{
    console.log(updatedList);
  });
}