Угловая связь между родительскими и дочерними компонентами

Question

У меня есть случай, когда у меня есть родительский компонент и 2 дочерних компонента (компоненты выбора на основе ng-select) Идея состоит в том, что когда я выбираю и элемент в первом ng-select, то же самое должно быть отключено во втором. И наоборот.

В родительском элементе я использую @ViewChildren для запроса компонента и отключенного свойства ввода.

В дочерних элементах я отправляю нужную мне информацию в родительском элементе, когда выбираю и добавляю элемент в ng-select

Затем в этом методе я нахожу правильный дочерний компонент и устанавливаю свойство disabled input.

const connectionSelector = this.connectionSelectors.find(connectionSelector => connectionSelector.source == false);
connectionSelector.disabledConnection = this.selectedSourceConnection;

В дочернем компоненте у меня есть метод ngOnChanges для проверки изменений, но свойство disabledConnection не обновляется

Он работает только тогда, когда я загружаю страницу, я одновременно отправляю изменения в родительский элемент OnInit и когда я меняю элемент в ng-select, поэтому изменения отправляются в родительский

Родительский вид:

<sc-connection-selector [default]="false" [source]="true" [quick]="false"
      [selectedConnection]="selectedSourceConnection"
      [disabledConnectionId]="disabledTargetConnectionId"
      (dataToEmit)="onValueChanged($event)">
</sc-connection-selector>

Ребенок:

<ng-select [items]="connections" bindLabel="userName"
    [placeholder]="'general.select-placeholder' | translate " 
    (change)="onConnectionChange()" 
    groupBy="type"
    dropdownPosition="bottom" 
    [(ngModel)]="selectedConnection">
    <ng-template ng-optgroup-tmp let-item="item">
      <b>{{item.type || 'Unnamed group'}}</b>
    </ng-template>
  </ng-select>

Что мне здесь не хватает?

-Jani

Answer 1

Редактировать:

Вы обновляете значение дочернего компонента, а не родительского, OnChanges сработает, если

привязанное к данным свойство директивы изменяется

это означает, что при изменении значения родительского компонента запускается OnChanges для дочернего компонента.

Чтобы получить желаемое поведение, вы должны переместить соответствующий раздел (в котором вы обновляете свойство disabled) из функции OnChanges в установщик disabledConnectionId, чтобы каждый раз, когда изменяется (disabledConnectionId), вы обновляете раскрывающийся список, вот соответствующий код:

private currentDisabledConnectionId: Number;
@Input()
set disabledConnectionId(val: number) {
  if (this.currentDisabledConnectionId !== val) {
    this.currentDisabledConnectionId = val;
    this.setDisabledFields();
  }
}

private setDisabledFields() {
  this.connections.find(
    connection => connection.id == this.currentDisabledConnectionId
  ).disabled = true;
  console.log("connections: ", this.connections);
}

Обратите внимание, что я изменил ввод на сеттер и сохранил свойство как частное поле.

Также обратите внимание, что то, что вы разместили на stackblitz, не удаляет предыдущие отключенные поля, а только добавляет новые (я подозреваю, что это потому, что вы только вставили воспроизводимый пример).

Вот рабочий пример форка на stackBlitz