我有 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>
最佳答案
这是一个相当复杂的数据流。让我尝试提出一个更简单的:
<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>
而且如果你还想保留原来想要使用的数据流。通过这种方式,您需要像在输入属性中一样传递回调(立即想到回调 hell ):
@Input() allowUserToFinalizeInput: (isSubmit:bool) => bool;
并按照您现在的使用方式正确使用它。这里没有事件,也不需要 @Output
属性
关于html - 组件交互 2 向 Angular ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61607863/