One Componentから別のComponentへデータを送信する方法ボタン2をクリックして表示する方法

Question

メインページにテーブルを表示するコードがあり、テーブルの各行に2つのボタンがあります。 "編集ボタンをクリックすると、モーダルが開きます。今私の質問は、私は特定の従業員のボタンをクリックして "従業員のID"を渡す必要があることです。これどうやってするの？だから私はid： "101"のempoyeeを持っていて、この "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にを使用していますこのコンポーネントのインスタンスを取得し、そのコンポーネントのパブリック関数を呼び出します。

export class MyComponent { 

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

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

とあなたのEditEmployeeModalComponent、あなたのモデルを設定し、このopen(id:number)機能を持っている（または任意のあなたが使用して：

まず、あなたの主成分で<ops editmodal #myEditModal ...

次に、あなたのコンポーネントにIDを追加する必要がありますあなたのフォームのために）あなたのモーダルを開きます。

これが役に立ちます。