У меня есть несколько диалоговых окон Kendo на одном компоненте.Я не могу идентифицировать их однозначно.(Я знаю, что могу использовать идентификатор, но на самом деле я не хочу смешивать его JS)
<html>
<div class="example-wrapper">
<button kendoButton *ngIf="!dialogOpened && !windowOpened && !dialogTempKeyAccess && !dialogSendMessage" (click)="open('dialog')">Open dialog</button>
<button kendoButton *ngIf="!dialogOpened && !windowOpened && !dialogTempKeyAccess && !dialogSendMessage" (click)="open('window')">Open window</button>
<button kendoButton *ngIf="!dialogOpened && !windowOpened && !dialogTempKeyAccess && !dialogSendMessage" (click)="open('dialog')">Open DialogTempKeyAccess</button>
<button kendoButton *ngIf="!dialogOpened && !windowOpened && !dialogSendMessage && !dialogTempKeyAccess" (click)="open('dialog')">Open DialogSendMsg</button>
<kendo-dialog title="Demo Mode Confirmation" *ngIf="dialogOpened" (close)="close('dialog')" [minWidth]="250" [width]="450">
<p style="margin: 30px; text-align: center;">Do you want to set this org in Demo Mode?</p>
<kendo-dialog-actions>
<button kendoButton (click)="action('no')">No</button>
<button kendoButton (click)="action('yes')" primary="true">Yes</button>
</kendo-dialog-actions>
</kendo-dialog>
<kendo-window title="Edit Contact Info" *ngIf="windowOpened" (close)="close('window')" [minWidth]="250" [width]="450">
<form class="k-form">
<label class="k-form-field">
<span>Contact Name</span>
<input class="k-textbox" placeholder="Your Name" />
</label>
<label class="k-form-field">
<span>Phone Number</span>
<input class="k-textbox" placeholder="Your Phone Number" />
</label>
<label class="k-form-field">
<span>Email Address</span>
<input class="k-textbox" placeholder="Your Email Address" />
</label>
<label class="k-form-field">
<span>Support ID</span>
<input class="k-textbox" placeholder="Your Support ID" />
</label>
<div class="text-right">
<button type="button" class="k-button" (click)="close('window')">Cancel</button>
<button type="button" class="k-button k-primary" (click)=" close('window')">Update</button>
</div>
</form>
</kendo-window>
<kendo-dialog title="Temporary Access Key Issued to" *ngIf="dialogOpened" (close)="close('dialog')" [minWidth]="250" [width]="550">
<textarea style="margin: 10px; width:450px" class="k-textarea">Key:
sngfnnfervmlrmkfmr4ofomokmlkm gmertogmokremlgkmrsklrgmoemgomerg
a;mglmerogmeomgoermgomgmpermgoemgmre
</textarea>
<kendo-dialog-actions>
<button kendoButton (click)="action('yes')" primary="true">Copy Key</button>
</kendo-dialog-actions>
</kendo-dialog>
<kendo-dialog title="Temporary Access Key Issued to" *ngIf="dialogTempKeyAccess" (close)="close('dialog')" [minWidth]="250"
[width]="550">
<label class="k-form-field">Message</label>
<textarea style="margin: 10px; width:450px" class="k-textarea">
</textarea>
<kendo-dialog-actions>
<button kendoButton (click)="action('yes')" primary="true">Copy Key</button>
</kendo-dialog-actions>
</kendo-dialog>
</div>
</html>
Вот код для методов
public close(component) {
this[component + 'Opened'] = false;
}
public open(component) {
this[component + 'Opened'] = true;
}
public action(status) {
console.log(`Dialog result: ${status}`);
this.dialogOpened = false;
}
Пожалуйста, дайте мне знатьесли есть лучший способ добиться этого, так как в настоящее время, если я нажимаю на диалоговое окно, все, что он делает, открывает тот же контент.