Question

我有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）->此方法在项组件上，我必须向其发送参数并使用返回的值。我尝试使用Output和Input做到这一点-我向item组件发出一个带有param值的事件，调用allowUserToFinalize（param），然后将结果通过Input发送到button组件，并在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;
}

}

butts 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

那是相当复杂的数据流。 Lemme尝试提出一个更简单的方法：

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

组件交互2路角度

1 个答案: