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是触发模态的内容。然后它将从中省略的值绑定到新方法doTaskStatusChange。

当我只传递this._bsModalRef.content.action.take(1).subscribe(this.doTaskStatusChange.bind(this));

这样的单个值时，这非常正常

当我尝试将一些额外的值传递给第二个方法时，以及从组件发出的值（注释）时，问题就出现了。

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

这里是否存在范围问题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)
}

Angular订阅和绑定到发出的事件

1 个答案: