角2コンポーネントイベントエミッタ

Question

親コンポーネントにng-smartテーブルグリッドを持つ2つのコンポーネントと、親コンポーネントで使用される他のボタンレンダリングコンポーネント サブスクライブメソッドの後にイベントエミッタを使用してボタンをクリックして関数を呼び出すと、私はあなたが単純な子コンポーネントは角に振る舞うと、それは同じように動作しないコンポーネントをレンダリング使用する場合は、この中には、NG2-スマートテーブルでは、親コンポーネント

 Parent Component: 

      import { Component, OnInit } from '@angular/core'; 
     import { Ng2SmartTableModule } from 'ng2-smart-table'; 
     import { WebApiObservableService } from '../service/WebApiOberableService/WebApiServices.services'; 
     import { LeaveApproval } from '../service/leaveapproval/leaveapproval'; 
     import { LocalDataSource } from 'ng2-smart-table'; 
     import { Global } from './../global'; 
     import { ButtonRenderComponent } from '../GridButton/gridbutton.component'; 
     @Component({ 
      selector: 'app-leaveapproval', 
      templateUrl: './leaveapproval.component.html', 
      styleUrls: ['./leaveapproval.component.css'] 
     }) 
     export class LeaveApprovalComponent implements OnInit { 
      name = 'test'; 
      newName: string; 
      isVisible: boolean; 
      errorMessage: string; 
      public model: LeaveApproval[]; 
      source: LocalDataSource; 
      employeeleaveObj = new LeaveApproval(); 
      gridData=[]; 
      settings = { 
      selectMode: 'multi', 
      delete: { 
       confirmDelete: true, 
      }, 


      add: { 
       addButtonContent: "", 
      }, 
      columns: { 
       id: { 
       title: 'ID', 
       editable: false, 
       }, 
       emp_id: { 
       title: 'Emp_ID', 
       editable: true, 
       }, 
       name: { 
       title: 'Name', 
       editable: true, 
       }, 
       leave_from_date: { 
       title: 'Leave From Date', 
       editable: true, 
       }, 
       leave_to_date: { 
       title: 'Leave To Date', 
       editable: true, 
       }, 
       no_of_days: { 
       title: 'Number Of Days', 
       editable: true, 
       }, 
       leave_reason: { 
       title: 'Reason Of Leave', 
       editable: true, 
       }, 
       leave_balance: { 
       title: 'Available Leaves', 
       }, 
       button: { 
       title: 'Button', 
       type: 'custom', 
       renderComponent: ButtonRenderComponent, 
       onComponentInitFunction(instance) { 
        instance.save.subscribe(row => { 

        }); 
       } 
       }, 
      } 
      }; 
      data = []; 

      constructor(private getLeaveApproval: WebApiObservableService, employeeleaveObj: LeaveApproval) { 

      employeeleaveObj = new LeaveApproval(); 
      } 

      ngOnInit() { 
      this.source = new LocalDataSource(); 
      let model:any; 
      model={empid:Global.empId} 
      this.getLeaveApproval.getServiceWithParameter('/getallemployeeleaves',model) 
       .subscribe(
       result => this.loadDataToGrid(result), 

       error => this.errorMessage = <any>error 
      ); 
      } 


     } 


Child Component: 

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; 
import { ViewCell } from 'ng2-smart-table'; 
import { Global } from './../global'; 
import { WebApiObservableService } from '../service/WebApiOberableService/WebApiServices.services'; 
@Component({ 
    selector: 'button-view', 
    template: ` 
    <button (click)="onClick()">Approve</button> 
    <button (click)="onRejectClick()">Reject</button> 
    `, 
}) 
    export class ButtonRenderComponent implements ViewCell, OnInit { 

    renderValue: string; 
    errorMessage: string; 

     @Input() value: string | number; 
     @Input() rowData: any; 

     @Output() save: EventEmitter<any> = new EventEmitter(); 

     ngOnInit() { 
     this.renderValue = this.value.toString().toUpperCase(); 
     } 
     constructor(private apiService: WebApiObservableService) { 



     } 
     onClick() { 
     /* this.save.emit(this.rowData); 
     console.log(this.save.emit(this.rowData)); */ 

     /* let saveObj:Object; 
     saveObj={appovedBy:1,leaveStatus:"1",empId:this.rowData.emp_id,rowId:this.rowData.id,no_of_days:this.rowData.no_of_days}; 
     this.apiService.createService('/approveLeave', saveObj) 
     .subscribe(result => console.log(result), 
     error =>this.errorMessage = <any>error 
     ); */ 
     this.save.emit(this); 

      } 
     onRejectClick() { 
     /* this.save.emit(this.rowData); 
     console.log(this.save.emit(this.rowData)); */ 
     let saveObj:Object; 
     saveObj={rejectBy:1,leaveStatus:"0",empId:this.rowData.emp_id,rowId:this.rowData.id}; 
     this.apiService.createService('/rejectLeave', saveObj) 
     .subscribe(result => console.log(result), 
     error =>this.errorMessage = <any>error 
     ); 
     } 


    } 

Answer 1

の応答を購読アクセス親component.likeのインスタンス。

onComponentInitFunction(instance) { 
    instance.save.subscribe(row => { 
    console.log(row); // It is the data you emitted from the child component 
    }); 
} 

あなたが列を定義NG2-スマートテーブルの

内部設定：

button: { 
    title: 'Button', 
    type: 'custom', 
    renderComponent: ButtonRenderComponent, 
     onComponentInitFunction(instance) { 
      instance.save.subscribe(row => { 

      }); 
     } 
} 

あなたがイベント・エミッターを保存発するとき、あなたは親コンポーネントに発するものは何でも、データ内の親コンポーネントに受け取っています