Question

我正在使用angular 7和Leaflet js进行地图表示。

当我单击标记时，我想导航到另一页。但是路由无法正常工作。

例如：

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

单击标记时，URL更改为“ / dashboard”，但地图仍显示在页面中。

单击html元素时，导航正常。

有人可以帮我吗？

预先感谢

Answer 1

您需要定义两条路线，然后侦听click事件上的标记才能导航。

例如，在初始化应用时，这两个路线分别在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以便能够导航到其他页面

然后，您可能会有一个地图组件将在其中保存地图。在地图上添加标记，收听click事件并导航至仪表板页面：

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

我还添加了一个按钮，可从仪表板页面导航回地图组件

Demo

单击传单标记时，Angular 7路由不起作用

1 个答案: