如何在服務中使用 Angular Router 在組件之間導航？

Question

在我的 Ionic Angular 應用程序中，我在下面的標記服務中添加了一個單擊事件偵聽器：

makeCapitalMarkers(map: L.map): void {
    map.on('popupopen', function () {
          if (document.querySelector('.norwayLink')) {
            const link = document.querySelector('.norwayLink')
            link.addEventListener('click', buttonClicked)
          }
        });

    function buttonClicked() {
        console.log('EXECUTED');
    }
}

上面的代碼在我的home 組件中調用：

ngAfterViewInit(): void {
    this.markerService.makeCapitalMarkers(this.map);
}

當前，正在打印“EXECUTED” ，因此正在運行該方法。

但是當執行buttonClicked()時，我想使用 angular 路由器導航到聊天組件。

我嘗試了以下代碼：

function buttonClicked() {
    this.router.navigate(['/chat'])
}

無法讀取未定義的屬性“導航”

我在構造函數中將 router 聲明為 public，所以我不知道為什么它沒有在這個函數中被拾取。

如何使用此功能導航到聊天組件？

我應該能夠在服務內導航路線，還是應該在Home 組件內完成？

以下是我的路線：

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)},
  {
    path: 'chat',
    loadChildren: () => import('./chat/chat.module').then( m => m.ChatPageModule)
  },
];

Answer 1

在function() { }調用this指的是函數本身。 而是在類上聲明函數，並在箭頭函數中調用它。

makeCapitalMarkers(map: L.map): void {
  map.on('popupopen', () => {
    if (!eventHandlerAssigned && document.querySelector('.norwayLink')) {
      const link = document.querySelector('.norwayLink')
      link.addEventListener('click', () => {
        this.buttonClicked();
      });
      eventHandlerAssigned = true
    }
  });    
}

buttonClicked() {
  this.router.navigate(['/chat']);
}

Answer 2

你有沒有像這樣在服務中注入Router ？

import { Router } from '@angular/router';
...
constructor(private router: Router)
...