Question

我在同一组件上有多个Kendo对话框。我无法唯一地识别它们。（我知道我可以使用一个id，但是我真的不想将其与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;
  }

请告诉我是否有最好的方法来实现此目的，因为当前如果单击对话框，它会打开相同的内容。

在Kendo Angular中选择适当的对话框/窗口的问题

0 个答案: