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

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

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

eg:

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

при нажатии на маркер URL-адрес изменился на «/dashboard», но карта по-прежнему отображается на странице.

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

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

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


leaflet angular7
person Nithya    schedule 19.03.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

Например, добавьте эти две карты маршрутов и панель инструментов на 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");
   });

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

Демо

person kboul    schedule 19.03.2019