javascript - Angular 订阅并绑定(bind)到发出的事件

Question

我的组件中有一个方法，该方法在更改下拉列表值时触发。这会触发模态组件弹出并提示输入有关刚刚进行的更改的注释。

我正在订阅模态中发出的事件并将其传递给另一个方法，以便在填写注释并单击按钮时，它将该注释传递给另一个方法，我在该方法中处理并存储它。

/**
 * On the update of a task status
 * @param $event
 * @param task 
 */
onTaskStatusChange($event, task) {

    // Define our status/task
    let taskID = task.elementRef.nativeElement.dataset.taskid;
    let statusID = $event.StatusID;

    // Call our modal, pass the ConfirmRemoveRuleModalComponent
    this._bsModalRef = this._modalService.show(TransitionPromptComponent);
    this._bsModalRef.content.action.take(1).subscribe(this.doTaskStatusChange.bind(this, taskID, statusID));
}

/**
 * After entering our note on the transition prompt, update the status
 * @param note 
 * @param taskID 
 * @param statusID 
 */
doTaskStatusChange(note, taskID, statusID) {
    console.log(note, taskID, statusID)
}

在这段代码中，onTaskStatusChange 是触发模态的。然后它将将从中省略的值绑定(bind)到新方法 doTaskStatusChange。

当我只传递单个值时，这工作得很好，例如 this._bsModalRef.content.action.take(1).subscribe(this.doTaskStatusChange.bind(this));

当我试图将一些附加值以及从组件发出的值(注释)传递给第二种方法时，问题就出现了。

在这种情况下，doTaskStatusChange 中的 statusID 显示模态组件发出的值，而不是本应与其一起传递的数值。

this 在某种程度上与 $event 冲突是否存在范围问题？

Answer 1

bind 的第一个参数在函数体中变成了 this。您可以检索传递给 bind 的参数:

this.doTaskStatusChange.bind(this, taskID, statusID)

如果您将 doTaksStatusChange 定义为:

doTaskStatusChange(taskID, statusID) {
    console.log(this, taskID, statusID)
}

您可以在 this stackblitz 中找到代码示例.

---

另一种方法是使用箭头函数作为回调:

this._bsModalRef.content.action.take(1).subscribe((note) => {
    this.doTaskStatusChange(note, taskID, statusID);
});

与

doTaskStatusChange(note, taskID, statusID) {
    console.log(note, taskID, statusID)
}