1

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

     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
         );
       }


  }
4

1 回答 1

0

在 ng2-smart 表中，当您使用渲染组件时，它的行为与简单的子组件在角度中的行为不同。当您发出 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 => {

          });
       }
}
于 2018-01-07T09:59:25.940 回答