Hellou,有人可以向我解释如何使这项工作正常,因为我在使用viewChild指令方面不是很有经验......
这是交易,我正在研究一个小角度的小crud应用程序,并有一个填充表格与我的数据,在每一行我有一个删除按钮打开一个小确认窗口我已设法得到模态(ngx- bootstrap 3)打开点击,现在我必须弄清楚如何从我的父组件调用函数,我的http请求使用我的表上的按钮,但不是当我尝试修改它以打开模态并发出删除请求点击确认按钮......
这是一些代码,在我的父app.component.html小表中......
<table style="width:100%" class="table table-striped"
id="billing_history_table">
<thead class="head">
<tr>
<th>Name</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let e of employeelist>
<td>{{e.firstName}}</td>
<td><a (click)="childModal.show()"><span class="glyphicon
glyphicon-trash"></span></a></td>
</tr>
</tbody>
</table>
<app-modal-component #childModal>
</app-modal-component>
在我的app.component.ts中,这是我的父组件
@ViewChild('childModal') childModal: ModalComponent;
这是我想在我的打开模态中调用的函数,来自父comp。
DeleteEmployee(id: string) {
this._usermanagementservice.deleteEmployee(id).subscribe(res => {
this.LoadAllEmployees();
})
}
Id来自我的DB,未在表格中显示,我不知道如何将其传递给模态
在我有儿童组件
@ViewChild('childModal') public childModal: ModalDirective;
show() {
this.childModal.show();
}
hide() {
this.childModal.hide();
}
并在子组件.html
<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1"
role="dialog" [config]="{backdrop: 'static'}" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body text-center">
<p>Do you want to confirm?</p>
<button type="button" class="btn btn-default"
(click)="confirm()">Yes</button>
<button type="button" class="btn btn-primary"
(click)="hide()">No</button>
</div>
</div>
</div>
</div>
希望你理解我的问题,在子.html中确认按钮应该触发DeleteEmployee函数并使用我的表中的Id make delete request ...我知道它必须对输出和事件emiters做一些事情,但我没有线索,谢谢 :(
您可以在Angular中使用EventEmitter和Input()来执行此任务。
在您的子组件中声明两个事件发射器,一个用于是单击,一个用于无单击。您可以使用输入将Id传递给子组件。
@Input() selectedItem:number;
@Output() yesClicked: EventEmitter<any> = new EventEmitter();
@Output() noClicked: EventEmitter<any> = new EventEmitter();
单击是时,可以在子组件中调用方法。在该方法中,您必须发出已创建的事件。
confirm(){
this.yesClicked.emit();
}
hide(){
this.noClicked.emit();
}
在子组件html中,您必须在childComponent中调用“confirm”方法以获取“是”单击事件并隐藏“否”单击事件的方法。
<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1"
role="dialog" [config]="{backdrop: 'static'}" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body text-center">
<p>Do you want to confirm?</p>
<button type="button" class="btn btn-default"
(click)="confirm()">Yes</button>
<button type="button" class="btn btn-primary"
(click)="hide()">No</button>
</div>
</div>
</div>
</div>
在父app.component.html中,调用app.component.ts方法,从模板到子组件发出的事件,如下所示。
<table style="width:100%" class="table table-striped"
id="billing_history_table">
<thead class="head">
<tr>
<th>Name</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let e of employeelist>
<td>{{e.firstName}}</td>
<td><a (click)="clickedItem=e.Id;childModal.show()"><span class="glyphicon
glyphicon-trash"></span></a></td>
</tr>
</tbody>
</table>
<app-modal-component #childModal [selectedItem]="clickedItem"(yesClicked)="DeleteEmployee($event)" (noClicked)="hide()" >
</app-modal-component>
在app中,component.ts为clickedItem Id声明一个变量,并声明删除和隐藏模型的方法。
clickedItem:number;
DeleteEmployee(id: string) {
this._usermanagementservice.deleteEmployee(id).subscribe(res => {
this.LoadAllEmployees();
})
}