Angular组件回调中this指向异常，如何调用canMove方法？

针对你遇到的第三方组件配置回调里this无法指向AppComponent实例的问题，有几种简洁的解决方式，都能保证canMove方法可被复用：

方法一：使用箭头函数（推荐） #

箭头函数不会创建独立的this上下文，会直接继承外层（组件实例）的this，修改onMove的定义即可：

export class AppComponent implements OnInit {
    readonly itemMovementOptions = {
      threshold: {
        horizontal: 25,
        vertical: 25,
      },
      events: {
        // 将普通函数改为箭头函数
        onMove: ({ items }) => {
          for (let i = 0, len = items.after.length; i < len; i++) {
            const item = items.after[i];
            // 此处this正确指向AppComponent实例
            if (!this.canMove(item)) return items.before;
          }
          return items.after;
        },
      },
    };

    public canMove(item) {
       // ...你的逻辑
    }

    readonly config = {
        ItemResizing(this.itemResizeOptions),
        ItemMovement(this.itemMovementOptions),
    }

    ngOnInit(): void {
      GSTC.api.stateFromConfig(this.config);
    }
}

方法二：手动绑定this到组件实例 #

如果需要保留普通函数写法，可以在构造函数中通过bind方法强制绑定this：

export class AppComponent implements OnInit {
    readonly itemMovementOptions: {
      threshold: { horizontal: number; vertical: number };
      events: { onMove: (params: { items: any }) => any };
    };

    constructor() {
      this.itemMovementOptions = {
        threshold: {
          horizontal: 25,
          vertical: 25,
        },
        events: {
          onMove({ items }) {
            for (let i = 0, len = items.after.length; i < len; i++) {
              const item = items.after[i];
              if (!this.canMove(item)) return items.before;
            }
            return items.after;
          },
        },
      };
      // 将onMove的this绑定到当前组件实例
      this.itemMovementOptions.events.onMove = this.itemMovementOptions.events.onMove.bind(this);
    }

    public canMove(item) {
       // ...你的逻辑
    }

    readonly config = {
        ItemResizing(this.itemResizeOptions),
        ItemMovement(this.itemMovementOptions),
    }

    ngOnInit(): void {
      GSTC.api.stateFromConfig(this.config);
    }
}

方法三：闭包保存组件实例引用 #

通过闭包捕获组件实例的引用，在回调中使用该引用替代this：

export class AppComponent implements OnInit {
    readonly itemMovementOptions;

    constructor() {
      // 保存组件实例的引用
      const component = this;
      this.itemMovementOptions = {
        threshold: {
          horizontal: 25,
          vertical: 25,
        },
        events: {
          onMove({ items }) {
            for (let i = 0, len = items.after.length; i < len; i++) {
              const item = items.after[i];
              // 使用component代替this，访问组件的canMove方法
              if (!component.canMove(item)) return items.before;
            }
            return items.after;
          },
        },
      };
    }

    public canMove(item) {
       // ...你的逻辑
    }

    readonly config = {
        ItemResizing(this.itemResizeOptions),
        ItemMovement(this.itemMovementOptions),
    }

    ngOnInit(): void {
      GSTC.api.stateFromConfig(this.config);
    }
}

以上三种方法都能让回调正确访问到canMove方法，其中箭头函数的写法最简洁直观，是最推荐的方案。

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