如何在服务中使用Angular Router在组件之间导航？

Question

在我的Ionic Angular应用中，我在下面的[[marker service中添加了一个单击事件侦听器：

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');
    }
}

上面的代码在我的[[
家庭组件

：中调用

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

当前正在打印

“ EXECUTED”

，因此该方法正在运行。

但是执行buttonClicked（）时，我想使用角度路由器导航到

聊天组件

。

我尝试了以下代码：

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

无法读取未定义的属性'navigate']
我在构造函数中将router声明为public，所以我不知道为什么在此函数中未选择它。
如何使用此功能导航到
聊天组件
？

我应该能够在服务内导航路线，还是应该在Home Component

内部完成？

这是我的路线：

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)
  },
];

在我的Ionic Angular应用中，我在下面的标记服务中添加了一个单击事件侦听器：makeCapitalMarkers（map：L.map）：void {map.on（'popupopen'，function（）{if（document ... 。

Answer 1

Answer 2