Angular 2组件事件发射极

Question

我有两个组件，一个带有ng-smart表格和其他按钮渲染组件的parent组件，该组件在父级组件中使用当我在按钮上调用函数在订阅方法后使用事件发射器单击时，我丢失了父级的实例。

     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

在ng2-smart表中使用渲染组件时，它的行为与简单的子组件的行为并不相同。当您发射保存事件发射器时，将在父母组件中收回到父组件的任何数据：

：

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

在定义列的ng2-smart-table的内部设置：

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