導航未定義的路由器角2中的錯誤

Question

我試圖將點擊事件添加到highcharts欄以導航到另一個html視圖並加載另一個組件。我現在從控制檯的錯誤是：

Cannot read property 'navigate' of undefined

這是我在我的組件文件：

import { Router } from '@angular/router'; 

constructor(private myService: MyService, private router: Router) {} 

plotOptions: { 
         bar: { 
          dataLabels: { 
           enabled: false 
          } 
         }, 
         series: { 
          pointWidth: 15, 
          cursor: 'pointer', 
          point: { 
           events: { 
            click: function(){ 
            this.router.navigate(['/nestedFolder/newPage.component.html']); 
            } 
           } 
          } 
         } 
        } 

我不知道我完全理解爲什麼我收到這個錯誤還是我我正在使用錯誤的方式導航。

文件夾結構：

• 主文件夾
  • main.component.ts
  • main.component.html
  • nestedFolder
    • newPage.component.html
    • newPage.component.ts

Answer 1

我認爲問題是，你沒有得到的this在你點擊功能應有的價值。

爲了解決這個問題，你可以創建一個self變量和外部範圍分配this，並在你的函數中使用self.router.navigate。

import { Router } from '@angular/router'; 

//Within your component 
self; 

constructor(private myService: MyService, private router: Router) { 
    self = this; // Assign outer context to self 
} 

plotOptions: { 
         bar: { 
          dataLabels: { 
           enabled: false 
          } 
         }, 
         series: { 
          pointWidth: 15, 
          cursor: 'pointer', 
          point: { 
           events: { 
            click: function(){ 
//Change this to self 

self.router.navigate(['/nestedFolder/newPage.component.html']); 
            } 
           } 
          } 
         } 
        }