html - bileşenler etkileşimi 2 yönlü angular

İki bileşenim var - biri bir öğe listesi için, diğeri ise kaydet, iptal, özet gibi birkaç buton için.

Butonlar bileşenimde, ihtiyacım olan yöntemleri çağırmak için girdi ve çıktıları kullanıyorum.

<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) -> bu yöntem items bileşeninde ve ona bir parametre göndermem ve dönen değeri kullanmam gerekiyor. Bunu Output ve Input ile yapmaya çalıştım - parametre değerini item bileşenine bir event ile yayarım, allowUserToFinalize(param) çağırırım ve sonucunu Input aracılığıyla button bileşenine gönderirim ve ngIf yönergesinde kullanılır. Bu sadece init sırasında çalışıyor, event=undefined gönderiyor, true döndürüyor ve sonra bir daha tetiklenmiyor. Bu etkileşimi yapmak için başka bir yöntem var mı?

öğeler html

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

  </app-items-action-buttons>

ürünler ts

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

}

butonlar ts

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

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

html düğmeleri

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

Cevap #1

Bu oldukça karmaşık bir veri akışı. Daha basit bir tane önermeye çalışayım:

<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>

Ve eğer hâlâ başlangıçta kullanmak istediğiniz veri akışını korumak istiyorsanız. Bu durumda, callback'i (hemen callback cehennemi düşünün) input özelliği olarak geçirmeniz gerekir:

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

ve onu şu anda kullandığınız şekilde kullanın. burada herhangi bir olay yok ve @Output özelliğine gerek yok

İlgili makaleler