1
부모 구성 요소에 ng-smart 테이블 그리드가있는 두 개의 구성 요소와 부모 구성 요소에 사용되는 다른 버튼 렌더링 구성 요소가 있습니다. 구독 방법을 사용한 후 이벤트 이미 터를 사용하여 버튼을 클릭 할 때 함수를 호출하면 당신이 구성 요소를 렌더링 사용하는 경우 부모 component.like의 인스턴스는 내가 간단한 하위 구성 요소가 각도에서 동작대로 같은 동작하지 않습니다 NG2 스마트 테이블에서 상위 구성 요소각도 2 구성 요소 이벤트 이미 터
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
);
}
}