Click Custom button but emit action cannot invoke function in the parent component.

Add a Custom Button view, and all work well except the click event. I register the event

`
export class TaskButtonViewComponent implements ViewCell, OnInit {
renderValue: string;

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

@Output() editTaskEvent: EventEmitter = new EventEmitter();
@Output() deleteTaskEvent: EventEmitter = new EventEmitter();
@Output() createReportInTaskEvent: EventEmitter = new EventEmitter();

constructor(private router: Router,
private http: Http,
private route: ActivatedRoute,
private logger: Logger,
private service: TaskService) {
}
ngOnInit() {
// this.renderValue = this.value.toString().toUpperCase();
}

editTaskClick() {
this.editTaskEvent.emit(this.rowData);
}

deleteTaskClick() {
this.deleteTaskEvent.emit(this.rowData);
}

createReportInTaskClick() {
this.createReportInTaskEvent.emit(this.rowData);
}

}
`

and when I click the button "edit"

`
settings = {
columns: {
name: {
title: 'one',
},
owner: {
title: 'two',
},
createTime: {
title: 'three',
},
button: {
title: 'action',
type: 'custom',
renderComponent: TaskButtonViewComponent,
onComponentInitFunction(instance) {
instance.editTaskEvent.subscribe(row => {
// localStorage.setItem('updateTaskData', JSON.stringify({id: row.id}));
// console.log(row.id);
// console.log(instance);
// this.editTask(row.id);
this.editTask(row.id);
});

instance.deleteTaskEvent.subscribe(row => {
// localStorage.setItem('updateTaskData', JSON.stringify({id: row.id}));
});
instance.createReportInTaskEvent.subscribe(row => {
// console.log(row.name);
});
}
}
},
actions: false,
hideSubHeader: true
};

public editTask() {
xxxxxx
}
`

After click the edit button, and an error poped:

`
TaskButtonViewComponent.html:2 ERROR TypeError: Cannot read property 'editTask' of undefined
at task.component.ts:54
at SafeSubscriber.schedulerFn [as _next] (core.es5.js:3647)
at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:185)
at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125)
at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at EventEmitter.webpackJsonp.../../../../rxjs/Subject.js.Subject.next (Subject.js:55)
at EventEmitter.webpackJsonp.../../../core/@angular/core.es5.js.EventEmitter.emit (core.es5.js:3621)
at TaskButtonViewComponent.webpackJsonp.../../../../../src/app/management/qualityreport/task/taskButtonView.component.ts.TaskButtonViewComponent.editTaskClick (taskButtonView.component.ts:42)
at Object.eval [as handleEvent] (TaskButtonViewComponent.html:2)
`

How can i trigger the event on the table button and callback the editTask function?