Angular 2 组件事件发射器

Question

我有两个组件，一个具有带有 ng-smart 表格网格的父组件和其他用于父组件的按钮渲染组件 当我在订阅方法后使用事件发射器调用按钮单击函数时，我丢失了父组件的实例。就像我在父组件的订阅响应中访问 this

     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 表中，当您使用渲染组件时，它的行为与简单的子组件在 angular 中的行为不同。当您发出 save Event Emitter 时，您向父组件发出的任何数据都会在父组件内部接收：

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 => {

          });
       }
}