взаимодействие компонентов 2-х стороннее angular

Question

У меня есть 2 компонента - один для списка элементов и один для нескольких кнопок, таких как сохранение, отмена, сводка и т. Д. c.

В моем компоненте кнопок я использую входы и выходы для вызова методов Мне нужно.

<button type="button" class="btn btn-danger ml-3" (click)="submit(true)" *ngIf="allowUserToFinalize(false)">
  Submit
</button>

<button type="button" class="btn btn-danger ml-3" (click)="submit(false)" *ngIf="allowUserToFinalize(true)">
  Cancel
</button>

allowUserToFinalize (false) -> этот метод находится в компоненте элементов, и я должен отправить ему параметр и использовать возвращаемое значение. Я попытался сделать это с помощью вывода и ввода - я генерирую событие со значением параметра для компонента элемента, вызываю allowUserToFinalize (параметр), а затем результат отправляется через ввод в компонент кнопки, и он используется в директиве ngIf . Это работает только с init, он отправляет event = undefined, возвращает true, а затем больше не запускается. Есть ли другой способ сделать это взаимодействие?

items html

<app-items-action-buttons>
    (allowUserToFinalize)="allowUserToFinalize($event)"
    [allowUserToFinalize]="allowUserToFinalize()">

  </app-items-action-buttons>

items ts

allowUserToFinalize(submit: boolean) {
      if (submit) {
  return false;
} else {
  return true;
}

}

butons ts

  @Output() allowUserToFinalizeEvent: EventEmitter<any> = new EventEmitter();
  @Input() allowUserToFinalizeInput;

  allowUserToFinalize(submit: boolea) {
    this.allowMerchantToFinalizeDealEvent.emit(submit)
  }

кнопки html

<button type="button" class="btn btn-danger ml-3" (click)="submit(false)" *ngIf="allowUserToFinalizeInput">
  Cancel
</button>

Answer 1

Это довольно сложный поток данных. Дайте мне попробовать предложить более простой вариант:

<button type="button" class="btn btn-danger ml-3" (click)="submit(true)" *ngIf="showSubmit">
  Submit
</button>

<button type="button" class="btn btn-danger ml-3" (click)="submit(false)" *ngIf="showCancel">
  Cancel
</button>

<app-items-action-buttons>
    [showSubmit]="allowUserToFinalize(true)"
    (showCancel)="allowUserToFinalize(false)"
>
</app-items-action-buttons>

И если вы все еще хотите сохранить поток данных, который вы хотели использовать изначально. Таким образом, вам нужно передать обратный вызов (сразу подумайте об аду обратного вызова), как в свойстве input:

 @Input() allowUserToFinalizeInput: (isSubmit:bool) => bool;

, и используйте его так, как вы его используете сейчас. здесь нет события и не нужно @Output свойство