Подпишитесь на смену модели ребенка с Parent in Angular

Question

В моем дочернем компоненте у меня есть список TimeZones с моделью SelectedTimeZone(Model).Мне нужно передать изменение SelectedTimeZone в список подписчиков.

ChildComponent:

export class TimeZoneComponent implements OnInit {

  public timezones: ITimeZone[] = [];
  public SelectedTimeZone: ITimeZone;
  public SelectedTimeZone$ = new Observable<ITimeZone>();

  constructor(private timezoneService: TimeZoneService) {
  //i'm not sure what to do next since i already declare an Observable<ITimezone>();
  }

}

Answer 1

Используйте источник событий в child и получите вывод внутри родительского компонента (ов).

ChildComponent.ts

При изменении часового пояса, вызвать функцию для вывода выходных данных.

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

export class TimeZoneComponent implements OnInit {

  public timezones: ITimeZone[] = [];
  public SelectedTimeZone: ITimeZone;

  // New event emitter
  @Output() timezoneChangeEvent = new EventEmitter<ITimeZone>();

  constructor(private timezoneService: TimeZoneService) {}

  // Trigger this function on timezone change
  onTimezoneChange(){
      // Output the selected timezone as event output
      this.timezoneChangeEvent.emit(this.SelectedTimeZone);
  }

}

ParentComponent.html

Привязать выходные данные дочернего события к функции внутри родительского компонента.

// Trigger a function on event output detection
<app-time-zone (timezoneChangeEvent)="changeTimezone($event)"></app-time-zone>

ParentComponent.ts

Функция, запускаемая при обнаружении выхода события.

changeTimezone(timezone:ITimeZone){
    // Updated timezone will be available here as timezone.
}

Answer 2

Существует множество способов передачи данных между двумя компонентами.Поскольку вы запросили, чтобы изменения были обнаружены списком подписчиков, https://stackoverflow.com/a/58092434/6835898 является идеальным ответом.Другие способы передачи данных основаны на отношениях между двумя компонентами, как в родителях, потомках, родителях и братьях.Для небольших проектов Observables звучит как хорошая идея, но по мере роста проектов вам придется составить словарь для всех различных Observables, которые вы будете использовать на протяжении всего проекта.Таким образом, EventEmitters и Inputs являются лучшими для передачи данных в больших проектах.

Answer 3

Вам нужно создать один сервис, в котором вы будете объявлять свой BehaviorSubject как

@Injectable({
    providedIn: 'root'
})
export class TimeZoneService {

    public selectedTimeZone= new BehaviorSubject('');
    constructor() {

    }
}

После того, как ваш часовой пояс будет изменен, из этого компонента вам нужно запустить событие как

this.timezoneService.selectedTimeZone.next(value of timezone);

Если вы хотите обновить значение часового пояса, вам нужно подписаться на это событие, например

this.timezoneService.selectedTimeZone.subscribe((p) => {
        // p is your updated value
    });