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

【问题标题】：Angular 7 routing not working when clicking on the leaflet marker单击传单标记时，Angular 7路由不起作用
【发布时间】：2019-03-19 10:28:17
【问题描述】：

我正在使用 angular 7 和传单 js 来表示地图。

单击标记时，我想导航到另一个页面。但是路由不能正常工作。

例如：

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

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

当点击 html 元素时，导航工作正常。

谁能帮帮我。

提前致谢

【问题讨论】：

标签： leaflet angular7

【解决方案1】：

您需要定义两条路线，然后在点击事件上监听标记才能导航。

例如，在 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)],
  ...
})

然后在app.html 上添加<router-outlet></router-outlet> 以便能够导航到不同的页面

然后你可能有一个地图组件，地图将被保存在其中。在地图上添加标记，监听点击事件并导航到仪表板页面：

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

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

Demo

【讨论】：