ng-select标签功能中调用Angular组件方法失效问题求助

你遇到的核心问题是函数上下文丢失：当ng-select调用addTagFn回调时，函数内部的this并没有指向你的AddTagsModalComponent实例，导致this.isValidTag、this.modalService这些组件成员都无法正常访问。

两种快速修复方案 #

方案1：将addTagFn改为箭头函数

箭头函数会自动捕获定义时的外层上下文（也就是你的组件实例），这样this就会始终指向组件：

// 替换原addTagFn的写法
addTagFn = (tag) => {
  tag = tag.trim();
  if (!this.isValidTag(tag)) {
    this.modalService.warn('ideas.tags.form.invalid-format');
    return;
  }
  if (this.tags.indexOf(tag) !== -1) {
    return;
  }
  this.tags.push(tag);
  return tag;
}

方案2：在构造函数中绑定this

如果更倾向于使用普通函数，可以在组件初始化时手动把this绑定到addTagFn上，强制函数内部的this指向组件实例：

constructor(router: Router, public activeModal: NgbActiveModal, private modalService: ModalService) {
  super(router, activeModal);
  // 添加这行绑定代码
  this.addTagFn = this.addTagFn.bind(this);
}

// 保留原addTagFn的普通函数写法
addTagFn(tag) {
  tag = tag.trim();
  if (!this.isValidTag(tag)) {
    this.modalService.warn('ideas.tags.form.invalid-format');
    return;
  }
  if (this.tags.indexOf(tag) !== -1) {
    return;
  }
  this.tags.push(tag);
  return tag;
}

问题原因解释 #

普通函数作为回调传递时，它的this指向由调用它的上下文决定（这里是ng-select内部的调用逻辑），而不是定义它的组件。箭头函数不会创建自己的this，而是继承外层作用域的this；bind()方法则是显式地把函数的this绑定到指定对象上，两种方式都能解决上下文丢失的问题。

修改后，你就能正常调用this.isValidTag进行标签校验，也能通过this.modalService弹出提示框了。

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