Угловая 7 маршрутизация не работает при нажатии на маркер листовки - PullRequest
Новая
       8

Угловая 7 маршрутизация не работает при нажатии на маркер листовки

0 голосов
/ 19 марта 2019

Я работаю с угловым 7 и листовкой js для представления карты.

Я хочу перейти на другую страницу при нажатии на маркер. Но маршрутизация не работает должным образом.

например: 

L.marker.on('click', function(){
    this.router.navigateByUrl('/dashboard');
});

при нажатии на маркер URL-адрес меняется на '/ панель инструментов', но карта все еще отображается на странице.

при нажатии на элемент html навигация работает нормально.

Может ли кто-нибудь помочь мне в этом.

Заранее спасибо

1 Ответ

0 голосов
/ 19 марта 2019

Вам нужно определить два маршрута, а затем прослушать маркер на событии щелчка, чтобы иметь возможность перемещаться.

Например, эти две карты маршрутов и панель мониторинга на app.module.ts и приземлились в виде карты при инициализации приложения: 

const appRoutes: Routes = [
  { path: "map", component: MapComponent },
  { path: "dashboard", component: DashboardComponent },
  { path: "", redirectTo: "/map", pathMatch: "full" }
];

@NgModule({
  declarations: [AppComponent, MapComponent, DashboardComponent],
  imports: [BrowserModule, RouterModule.forRoot(appRoutes)],
  ...
})

, а затем добавьте <router-outlet></router-outlet> на app.html, чтобы иметь возможность переходить на разные страницы

Тогда у вас может быть компонент карты, где будет храниться карта. Добавьте маркер на карту, прослушайте событие нажатия и перейдите на страницу панели инструментов: 

L.marker([51.505, -0.09], this.markerIcon)
   .addTo(this.map)
   .on("click", e => {
        this.router.navigateByUrl("/dashboard");
   });

Я также добавил кнопку для перехода обратно к компоненту карты со страницы панели инструментов

Демо

...