ActivatedRoute undefined for custom button click

Question

The following code instantiates jqgrid along with a custom button once the columnModel is available. This works fine.

    @Component({
       selector: 'somecomp',
       templateUrl: './somecomp.component.html'
    })
    export class SomeComponent implements OnInit{
      private _someService;
      private _route;
      constructor(someService:SomeService,route:ActivatedRoute){ 
         this._someService = someService;
         this._route = route;  
      }

      ngOnInit(){
         this.someService.getColumnModel.subscribe(columnModel=>{

            (<any>jQuery('#grid')).jqGrid({
               colModel : columnModel,
               caption : 'Data Grid',
               url : "http://sampleurl.com/data"
            });
            //custom button
            (<any>jQuery('#grid')).navButtonAdd("#pager",{
                buttonicon:"ui-icon-add",
                onClickButton : () => {
                   alert(this._route);//Route(...)
                   this._route.navigate(["/addPage"]); 
                }   
            });
...

On click of this button, it requires navigation to another page as shown. But,that alert comes as undefined and gives the error as Cannot read property 'navigate' of undefined.

How to ensure that this._route is available?

Answer 1

Try to replace:

function(){
   alert(this._route);//undefined
   this._route.navigate(["/addPage"]); 
}

with:

() => {
   alert(this._route);//undefined
   this._route.navigate(["/addPage"]); 
}

Otherwise this refers to the object passed as second argument of the navButtonAdd function