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

Question

所以我有以下代码在主页上显示表格，表格中的每一行都有两个按钮，“编辑”和“删除”。因此，当我单击“编辑”按钮时，会打开模式。现在我的问题是我需要将特定员工的按钮单击时的“员工 ID”传递给 .我怎样才能做到这一点？因此，假设我有一个 id: "101" 的员工并想要编辑信息，如何将这个 "101" 传递给编辑模式组件on Button Click，以便我可以填充它的详细信息我的模态文本框中的员工？

@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

据我了解您的代码 sn-p，您还有另一个组件可以打开模式来编辑您的员工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) 函数，它设置您的模型（或您用于表单的任何内容）并打开您的模式。

希望这会有所帮助。