[英]How to send data from One Component to another Component on button click in angular 2
So I have the following Code that displays the table on main page and I have two buttons for each row in the table, "Edit" and "Delete".所以我有以下代码在主页面上显示表格,表格中的每一行都有两个按钮,“编辑”和“删除”。 So when I click the Edit button the modal is opened.因此,当我单击“编辑”按钮时,会打开模态。 Now my question is that I need to pass the "employee id" on button click of a particular employee to the .现在我的问题是,我需要在单击特定员工的按钮时将“员工 ID”传递给 . How can I do this?我怎样才能做到这一点? So lets say I have an empoyee with id: "101" and want to edit information , how to pass this "101" to the edit modal component on Button Click so that I can populate the detials of that employee in text boxes in my modal?因此,假设我有一个 id 为“101”的员工并且想要编辑信息,如何将此“101”传递给按钮单击上的编辑模式组件,以便我可以在模式的文本框中填充该员工的详细信息?
@Component({
selector: 'ops-employee',
pipes: [],
styles: [],
template: `
<ops-addmodal [(open)]="addEmployeeOpen" (check)="updateEmployeeList($event)"></ops-addmodal>
<ops-editmodal [(open)]="editEmployeeOpen" [data]="editId" (check)="editEmployeeList($event)">
</ops-editmodal>
<div class="col-md-8 col-md-offset-2">
<h1> Employee Info </h1>
<hr>
<button class="btn btn-lg btn-primary" (click)="addEmployee()">Add</button>
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Role</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor = "#employee of employeeDetails">
<td>{{employee.empName}}</td>
<td>{{employee.empAge}}</td>
<td>{{employee.empRole}}</td>
<td>
<button class="btn btn-sm btn-default" (click)="editEmployee(employee.empId)">Edit</button>
<button class="btn btn-sm btn-danger" (click)="deleteEmployee(employee.empId)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
`,
directives: [AddEmployeeModalComponent, EditEmployeeModalComponent, ModalComponent]
})
So as far as i understood your code snippet, you have another component which opens the modal to edit your Employee EditEmployeeModalComponent
, which is probably this element <ops-editmodal ...
因此,据我了解您的代码片段,您有另一个组件可以打开模态来编辑您的 Employee EditEmployeeModalComponent
,这可能是这个元素<ops-editmodal ...
Then what you could do is use @ViewChild
to get the instance of this component and call a public function of it.然后你可以做的是使用@ViewChild
来获取这个组件的实例并调用它的公共函数。
First you have to add an id to your component <ops editmodal #myEditModal ...
首先,您必须向组件添加一个 id <ops editmodal #myEditModal ...
Then in your main Component:然后在您的主要组件中:
export class MyComponent {
@ViewChild('myEditModal')
private _editModal:EditEmployeeModalComponent;
editEmployee( employeeId:number ):void {
this._editModal.open( employeeId );
}
}
and in your EditEmployeeModalComponent
you have this open(id:number)
function which sets your model (or whatever you use for your form) and opens your modal.在你的EditEmployeeModalComponent
你有这个open(id:number)
函数,它设置你的模型(或任何你用于表单的东西)并打开你的模态。
Hope this helps.希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.