Как использовать Angular Маршрутизатор внутри Сервиса для навигации между компонентами? - PullRequest
Новая
       3

Как использовать Angular Маршрутизатор внутри Сервиса для навигации между компонентами?

0 голосов
/ 22 марта 2020

В моем приложении Ioni c 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');
    }
}

Выше код вызывается в моем домашнем компоненте : 

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

В настоящее время "EXECUTED" печатается, поэтому метод запускается .

Но когда buttonClicked () , я хочу использовать маршрутизатор angular для перехода к компоненту чата .

Я попробовал следующий код: 

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

Невозможно прочитать свойство 'navigate' из неопределенного

Я объявил маршрутизатор в конструкторе как publi c, поэтому я не знаю, почему его не улавливают в этой функции.

Как мне перейти к компоненту чата с помощью этой функции?

Должен ли я быть в состоянии перемещаться по маршрутам внутри службы, или это должно быть сделано внутри Домашнего компонента ?

Вот мои маршруты: 

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

Ответы [ 2 ]

1 голос
/ 22 марта 2020

Вызов this внутри function() { } относится к самой функции. Вместо этого объявите функцию в классе и вызовите ее внутри функций со стрелками. 

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']);
}
0 голосов
/ 22 марта 2020

Вы вводили Router в службу, как это? 

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