Angular类成员箭头函数作回调时chLocation.back()调用异常问题

你的代码有两处直接导致执行报错的问题，和箭头函数本身的this绑定特性无关：

• 类成员访问缺少this前缀：chTest方法中传给myCallBack的chOnRemoved没有加this.，运行时会直接抛出chOnRemoved is not defined的引用错误，根本没有触发你定义的类方法。
• 服务未完成依赖注入：你仅声明了chLocation的类型为Location，没有在类构造函数中声明该依赖完成Angular的DI注入，运行时chLocation实际值为undefined，自然无法调用back()方法。

import { Location } from '@angular/common';
import { Component } from '@angular/core';

@Component({
  selector: 'app-ch-qu-contact',
  template: ''
})
export class ChQuContactComponent {
  // 构造函数声明依赖，Angular会自动注入Location服务实例
  constructor(private chLocation: Location) {}

  // 类字段形式的箭头函数会在实例初始化时自动绑定当前实例的this，回调触发时this指向不会丢失
  private chOnRemoved = () => {
    this.chLocation.back();
  }

  chTest() {
    // 访问类自身的成员属性/方法必须加this.前缀
    myCallBack(this.chOnRemoved);
  }
}

• 如果你的myCallBack是第三方SDK的原生回调、DOM事件回调这类脱离Angular执行上下文的触发场景，调用Location.back()后可能出现视图不更新、路由状态不同步的问题，此时需要借助NgZone把执行逻辑拉回Angular上下文：

import { NgZone } from '@angular/core';
import { Location } from '@angular/common';

@Component({/* 组件元数据省略 */})
export class ChQuContactComponent {
  constructor(
    private chLocation: Location,
    private ngZone: NgZone
  ) {}

  private chOnRemoved = () => {
    this.ngZone.run(() => {
      this.chLocation.back();
    });
  }

  chTest() {
    myCallBack(this.chOnRemoved);
  }
}

• 如果你更习惯写类普通方法而非类字段箭头函数，也可以在传参时手动绑定this，效果完全一致：

// 普通类方法
chOnRemoved() {
  this.chLocation.back();
}

chTest() {
  // 传参时手动绑定当前实例this
  myCallBack(this.chOnRemoved.bind(this));
}

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