javascript - ¿Cómo navegar al componente desde la devolución de llamada de NVD3 en Angular 4?

He implementado gráficos NVD3 en Angular 4. Escribí un evento on Click dentro de una función de devolución de llamada, al hacer clic en el gráfico estoy tratando de navegar a otro componente pero no puedo navegar.

Código :

import { Router} from '@angular/router';
export class MyNewComponentComponent implements OnInit {
constructor(public router: Router)
  {

  }
 this.options = {
    chart: {
      type: 'discreteBarChart',
      height: 450,
      margin : {
        top: 20,
        right: 20,
        bottom: 50,
        left: 55
      },

      x: function(d){return d.label;},
      y: function(d){return d.value;},
      showValues: true,
      valueFormat: function(d){
        return d3.format(',.4f')(d);
      },
      duration: 500,
      xAxis: {
        axisLabel: 'X Axis'
      },
      yAxis: {
        axisLabel: 'Y Axis',
        axisLabelDistance: -10
      },
      callback: function(chart){ 
        chart.discretebar.dispatch.on('elementClick', (angularEvent,e) => {
             console.log("Inside click"); 
                            this.router.navigate(["/app-new-component2"]); 


        });

      }

    }
  }

}

Estoy recibiendo este error en la consola. No se pudo encontrar la referencia del componente para redirigir.

Esperando sugerencias. Gracias de antemano..

Respuesta #1

Entonces tu problema está justo aquí

  callback: function(chart){ // note the callback function
    chart.discretebar.dispatch.on('elementClick', (angularEvent,e) => {
         console.log("Inside click"); 
         this.router.navigate(["/app-new-component2"]); 
    });

  }

Entonces, donde está tu callback, estás usando una function() de ES5, lo que significa que cualquier cosa dentro de esa función no mantendrá el this del ámbito global y en su lugar creará un nuevo ámbito. Así que en este caso, cuando haces this.router.navigate, no te estás refiriendo al componente (el this global), sino al this del ámbito de la función, que no tiene un router. Así que lo que quieres hacer es esto,

  callback: (chart) => { 
    chart.discretebar.dispatch.on('elementClick', (angularEvent,e) => {
         console.log("Inside click"); 
         this.router.navigate(["/app-new-component2"]); 
    });

  }

Usar una función ES6 (flecha gorda) () => {} mantendrá el this del ámbito global, lo que te permitirá usar tu enrutador.