使用子組件按鈕點擊關閉Kendo Angular對話框點擊

Question

我有一個窗體組件，我使用kendo對話框服務嵌入到對話框中。我可以撥打我的服務，並將我的表單數據保存到我的保存點擊。我試圖弄清楚如何在保存點擊後關閉對話框。我想保留對話框組件中的所有邏輯，只需從父組件打開對話框。驗證和保存呼叫將在對話框組件中發生。我可以使用一個模板並將保存/關閉功能放在父組件中，但是我想將它隔離到對話服務使用的子組件。

ClientComponent.ts

import { AddClientComponent } from './add-client.component'; 
import { Component, OnInit } from '@angular/core'; 
import { ClientService } from '../services/client.service'; 
import { DialogService, DialogCloseResult, DialogRef } from '@progress/kendo-angular-dialog'; 

@Component({ 
    selector: 'clients', 
    templateUrl: 'ClientComponent.html', 
    styleUrls: ['../app.component.css'], 
    moduleId: module.id 
}) 
export class ClientsComponent implements OnInit { 
    public clients: any[]; 
    private title = 'Clients'; 

    constructor(private clientService: ClientService, private dialogService: DialogService) { 

    } 

    ngOnInit() { 
     this.clients = this.clientService.getClients(); 
    } 

    public showAddClient() { 
     const dialog: DialogRef = this.dialogService.open({ 
      title: "Add User", 

      // show component 
      content: AddClientComponent 
     }); 

     dialog.result.subscribe((result) => { 
      if (result instanceof DialogCloseResult) { 
       console.log("close"); 
      } else { 
       console.log("action", result); 
       this.clients = this.clientService.getClients(); 
      } 
     }); 
    } 
} 

clientComponent.html

<h1>{{title}}</h1> 

<br/> 

<button (click)="showAddClient(dialogActions)" class="k-button">Add Client</button> 

<kendo-grid [data]="clients"> 
    <kendo-grid-column field="Id" title="Id"> 
    </kendo-grid-column> 
    <kendo-grid-column field="FirstName" title="FirstName"> 
    </kendo-grid-column> 
    <kendo-grid-column field="LastName" title="LastName"> 
    </kendo-grid-column> 
    <kendo-grid-column field="DateOfBirth" title="DateOfBirth"> 
    </kendo-grid-column> 
    <kendo-grid-column field="Location" title="Location"> 
    </kendo-grid-column> 
</kendo-grid> 

<div kendoDialogContainer></div> 

附加client.component.ts

import { Component, Input } from '@angular/core'; 
import { ClientService } from '../services/client.service'; 
import { Client } from '../entities/Client'; 

@Component({ 
    selector: 'add-client', 
    templateUrl: 'AddClient.html', 
    moduleId: module.id 
}) 
export class AddClientComponent { 

    constructor(private clientService: ClientService) { 

    } 

    public firstName: string; 
    public lastName: string; 
    public dateOfBirth: Date; 
    public address: string; 

    public Save() { 

     var client = new Client(0, this.firstName, this.lastName, this.dateOfBirth, this.address) 
     this.clientService.addClient(client); 
    } 
} 

AddClient.html

<form class="k-form"> 
    <label class="k-form-field"> 
     <span>First Name</span> 
     <input class="k-textbox" placeholder="Your Name" [(ngModel)]="firstName" name="firstName" /> 
    </label> 
    <label class="k-form-field"> 
     <span>Last Name</span> 
     <input class="k-textbox" placeholder="Your Last Name" [(ngModel)]="lastName" name="lastName" /> 
    </label> 
    <label class="k-form-field"> 
     <span>Date of Birth</span> 
     <kendo-datepicker name="birthDate" 
          [(ngModel)]="birthDate"></kendo-datepicker> 
    </label> 
    <label class="k-form-field"> 
     <span>Location</span> 
     <input class="k-textbox" placeholder="Perrysburg" [(ngModel)]="location" name="location" /> 
    </label> 

    <button class="k-button pull-right" (click)="Save()" primary="true" style="background-color:deepskyblue">Save</button> 
</form> 

Answer 1

您可以在這裏看看我的回答類似的問題上防止對話框從按下操作按鈕後，關閉

how to add callbacks to kendo dialog actions

然後你可以關閉之前直接調用你的對話框實例功能因此您可以保留對話框組件中的所有邏輯。

Answer 2

現在有更好更簡單的方法來做到這一點。您可以查看文檔

https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/service/

基本上所有你需要做的是提供在子組件的DialogRef類型的構造函數的參數。

附加client.component.ts應該是這樣的：

import { Component, Input } from '@angular/core'; 
import { ClientService } from '../services/client.service'; 
import { Client } from '../entities/Client'; 
import { DialogRef } from '@progress/kendo-angular-dialog'; 

@Component({ 
    selector: 'add-client', 
    templateUrl: 'AddClient.html', 
    moduleId: module.id 
}) 

export class AddClientComponent { 

    constructor(private clientService: ClientService, 
    public dialog : DialogRef) { 

    } 

    public firstName: string; 
    public lastName: string; 
    public dateOfBirth: Date; 
    public address: string; 

    public Save() { 

     var client = new Client(0, this.firstName, this.lastName, this.dateOfBirth, this.address) 
     this.clientService.addClient(client); 
     this.dialog.close(); 
    } 
}