如何將數據從一個組件發送到另一個組件按鈕單擊角度2

Question

因此，我有以下代碼顯示在主頁上的表，我有兩個按鈕表中的每一行，「編輯」和「刪除」。所以當我點擊編輯按鈕時，模式被打開。現在我的問題是，我需要將按鈕點擊某個員工的「員工ID」傳遞給該員工。我怎樣才能做到這一點？所以我們可以說我有一個empoyee 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

所以據我瞭解您的代碼段，你有這將打開模式編輯您的員工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)功能，將你的模型（或任何你使用爲你的表格）並打開你的模式。

希望這會有所幫助。