如何在角度 2 中单击按钮时将数据从一个组件发送到另一个组件

Question

所以我有以下代码在主页面上显示表格，表格中的每一行都有两个按钮，“编辑”和“删除”。 因此，当我单击“编辑”按钮时，会打开模态。 现在我的问题是，我需要在单击特定员工的按钮时将“员工 ID”传递给 . 我怎样才能做到这一点？ 因此，假设我有一个 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]
    })

Answer 1

因此，据我了解您的代码片段，您有另一个组件可以打开模态来编辑您的 Employee EditEmployeeModalComponent ，这可能是这个元素<ops-editmodal ...

然后你可以做的是使用@ViewChild来获取这个组件的实例并调用它的公共函数。

首先，您必须向组件添加一个 id <ops editmodal #myEditModal ...

然后在您的主要组件中：

export class MyComponent {

     @ViewChild('myEditModal')
     private _editModal:EditEmployeeModalComponent;

     editEmployee( employeeId:number ):void {
         this._editModal.open( employeeId );
     }
 }

在你的EditEmployeeModalComponent你有这个open(id:number)函数，它设置你的模型（或任何你用于表单的东西）并打开你的模态。

希望这可以帮助。