Угловой 6, как передать выбранный объект из BehaviourSubjectкомпоненту, использующему сервис?

Question

У меня есть такой компонент, использующий apiService, где я использую BehaviourSubject для обмена данными из моего API:
Angular 4: как передать данные API из одного компонента в другой компонент?

settings.component.ts:

export class SettingsComponent implements OnInit {

  data: Observable<Setting[]>;
  public selectedSetting: Setting;

  constructor(private apiService: ApiService,
            private router: Router) { }

  // Load Setting while starting
  ngOnInit() {
    // this.getSettings();
    this.data = this.apiService.fetchData();
  }

  onSelect(setting: Setting): void {
    this.selectedSetting = setting;
  }

  clearSelect(): void {
    this.selectedSetting = null;
  }

  goToSettingDetail(): void {
    this.router.navigate(['settingsDetail']);
  }
}

api.service.ts:

export class ApiService {

  private API_URL = 'someUrl';
  public subject$: BehaviorSubject<Setting[]> = new BehaviorSubject<Setting[]>([]);


  constructor(private httpClient: HttpClient) {
  }

  // use async pipe in html template "*ngFor= let s of settings | async"
  // and just inject ApiService in components constructor
  fetchData() {
    const fetch$: Observable <Setting[]> = this.getSettings().pipe(share());
    fetch$.pipe(
        map(allSettings => this.subject$.next(allSettings))
      )
      .subscribe();
    return fetch$;
  }

  /** GET settings from API*/
  getSettings(): Observable<Setting[]> {
    return this.httpClient.get<Setting[]>(this.API_URL + '/settings')
      .pipe(
        catchError(this.handleError('getSettings', []))
      );
  }
}

Так что, если у меня есть часть в html-файле, подобная этой:

<table>
  <tr>
  <th align="left">Id</th>
  </tr>

  <tr *ngFor="let s of data | async">
    <td>{{s.Id}}</td>
    <td>
      <button (click)="onSelect(s); goToSettingsDetail()">ViewSettings</button>
    </td>
  </tr>
</table>

Как правильно использовать BehaviourSubject для получения выбранного объекта в других компонентах?Если я использую дополнительный сервис, который выбирает выбранный объект из settingsComponent, он больше не связан с BehaviourSubject, верно?Поэтому, если я внесу изменения в выбранный объект в другом компоненте, никто не заметит.

Можете ли вы дать мне несколько советов?:)

Answer 1

Я бы вставил выбранную вами настройку в ваш сервис.Затем вы можете подписаться на выбор в рамках вашего подкомпонента.

export class ApiService {
  private _selectedSetting$: BehaviorSubject<Setting> = new BehaviorSubject<Setting>(null);
  public selectedSetting$: Observable<Setting> = this._selectedSetting$.asObservable();

  ...

  public setSelectedSetting(s: Setting) {
    this._selectedSetting$.next(s);
  }

  ...
}