3

我有 2 个组件 - 一个用于项目列表，一个用于多个按钮，如保存、取消、摘要等。

在我的按钮组件中，我使用输入和输出来调用我需要的方法。

<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) -> 这个方法在 items 组件上，我必须向它发送一个参数并使用返回值。我试图用输出和输入来做到这一点 - 我向项目组件发出一个带有参数值的事件，调用 allowUserToFinalize(param) 然后结果通过输入发送到按钮组件并在 ngIf 指令中使用. 这仅适用于 init，它发送 event=undefined，它返回 true，然后不再触发。是否有另一种方法来进行这种交互？

项目 html

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

  </app-items-action-buttons>

项目 ts

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

}

按钮 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>
4

1 回答 1

2

这是一个相当复杂的数据流。让我尝试提出一个更简单的建议：

<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() allowUserToFinalizeInput: (isSubmit:bool) => bool;

并按照您现在使用的方式正确使用它。这里没有活动，也不需要@Output财产

于 2020-05-05T08:43:58.870 回答