Angular 使用子组件按钮关闭剑道角度对话框单击
我有一个表单组件,我使用剑道对话框服务嵌入到对话框中。我可以通过单击“保存”按钮调用我的服务并保存表单数据。我正在试图弄清楚如何在单击“保存”后关闭对话框。我想在对话框组件中保留所有逻辑,只需从父组件打开对话框。验证和保存调用将在对话框组件中发生。我可以只使用一个模板并将save/close函数放在父组件中,但我想将其与dialog服务使用的子组件隔离 ClientComponent.tsAngular 使用子组件按钮关闭剑道角度对话框单击,angular,kendo-ui,kendo-ui-angular2,Angular,Kendo Ui,Kendo Ui Angular2,我有一个表单组件,我使用剑道对话框服务嵌入到对话框中。我可以通过单击“保存”按钮调用我的服务并保存表单数据。我正在试图弄清楚如何在单击“保存”后关闭对话框。我想在对话框组件中保留所有逻辑,只需从父组件打开对话框。验证和保存调用将在对话框组件中发生。我可以只使用一个模板并将save/close函数放在父组件中,但我想将其与dialog服务使用的子组件隔离 ClientComponent.ts import { AddClientComponent } from './add-client.
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();
}
});
}
}
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);
}
}
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>
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>
名字
姓
出生日期
位置
拯救
您可以在这里查看我对一个类似问题的回答,该问题是关于在按下操作按钮后阻止对话框关闭的
然后,您可以在关闭对话框实例之前直接调用对话框实例上的函数,这样您就可以将所有逻辑保留在对话框组件中。现在有一种更好、更简单的方法。您可以查看文档 基本上,您所要做的就是在子组件中提供DialogRef类型的构造函数参数 add-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();
}
}
您是否可以在teamviewer中进行调试?很抱歉,我没有@Aravindupdate将
add.client.html
文件添加到post@Aravind已添加。抱歉,请同时更新其他html文件