Angular 7点击Leaflet标记时路由功能异常求助

嘿，这个问题我之前在项目里也碰到过！咱们来拆解一下问题根源，然后快速解决它~

问题核心 #

你写的Leaflet标记点击回调里，this的指向出问题了！Leaflet的事件回调函数中，this默认绑定的是触发事件的Marker实例，而不是你的Angular组件对象。这就导致你调用this.router的时候，其实并没有正确访问到Angular的Router服务——表面上URL变了，但实际上路由导航没有被正确触发，所以地图页面还停留在原地。

而你点击普通HTML元素时导航正常，是因为Angular自己的模板事件绑定（比如(click)="xxx"）会自动把回调的this绑定到组件实例，所以能顺利调用Router。

解决方案 #

这里有三种靠谱的解决方式，选你顺手的就行：

1. 使用箭头函数（最推荐）

箭头函数会继承外层上下文的this，也就是你的Angular组件实例，这样就能正确访问router了：

L.marker([yourLat, yourLng])
  .addTo(map)
  .on('click', () => {
    this.router.navigateByUrl('/dashboard');
  });

2. 提前保存组件的this引用

在回调外面把组件的this存成变量，比如that，然后在回调里用这个变量访问router：

const that = this; // 保存组件的this引用
L.marker([yourLat, yourLng])
  .addTo(map)
  .on('click', function() {
    that.router.navigateByUrl('/dashboard');
  });

3. 用bind()手动绑定this

通过bind()方法把回调函数的this强制绑定到组件实例：

L.marker([yourLat, yourLng])
  .addTo(map)
  .on('click', function() {
    this.router.navigateByUrl('/dashboard');
  }.bind(this)); // 绑定组件的this

验证一下 #

修改完代码后重新运行，点击Leaflet标记时，Router应该会正常触发导航，加载/dashboard对应的组件，地图页面也会被正确替换掉啦~

内容的提问来源于stack exchange，提问作者Nithya