Как перемещаться по компоненту из NVD3 Callback в Angular 4? - PullRequest
Новая
       9

Как перемещаться по компоненту из NVD3 Callback в Angular 4?

0 голосов
/ 09 сентября 2018

Я реализовал NVD3 Диаграммы в Angular 4. записал событие on Click внутри функции обратного вызова, при нажатии диаграммы я пытаюсь перейти к другому компоненту, но не могу перейти.

Код: 

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"]); 


        });

      }

    }
  }

}

Я получаю эту ошибку в консоли. Не удалось найти ссылку на компонент для перенаправления. enter image description here

В ожидании предложений. Заранее спасибо ..

1 Ответ

0 голосов
/ 12 сентября 2018

Так что ваша проблема прямо здесь 

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

  }

Итак, где ваш обратный вызов, вы используете es5 function(), что означает, что что-то внутри этой функции не будет содержать глобальную область действия this, а вместо этого создаст новую область. Так что в этом случае, когда вы делаете this.router.navigate, что вы не ссылаетесь на компонент (глобальный this), вы ссылаетесь на область действия this, которая не имеет router. Итак, что вы хотите сделать, это, 

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

  }

с использованием функции ES6 (жирная стрелка) () => {} сохранит глобальную область действия this, которая позволит вам использовать маршрутизатор.

...