在 api 调用 angular 后重定向到路由（使用 "this"）

Question

这类似于，但我想使用 class 变量 (this.areaCode) 作为重定向或更新变量 (this.userInfoMessage) 的一部分。例如：

onSubmit(form: string): void {
    this.taskService.createTask(task).subscribe(this.taskCreated,this.handleError)
}
private taskCreated (resp: any) {
    console.log("Task created successfully",resp)
    this.router.navigate([`/areas/${this.areaCode}`]); // eg: "/areas/12" //"this" is of type SafeSubscriber, not my class
}
private handleError (error: any) {
    this.userInfoMessage="We've got errors here!"  //"this" is of type SafeSubscriber, not my class so the message is now bound
    console.log(error)
}

但是我无法理解如何在这些函数中获取对 class 的引用。我需要使用 self=this 技巧吗？如果可以，怎么做？

谢谢

更新

我试过将 this 传递给 this.taskService.createTask(task).subscribe(this.taskCreated,this.handleError).bind(this) 但 Property 'bind' does not exist on type 'Subscription'.

更新 (2)

我猜问题是"how do I pass a reference into a subscription callback?"

如果我想订阅并传递对当前对象的引用，请阅读链接的 Q 我已尝试使用

var self= this
this.taskService.createTask(task).subscribe(this.taskCreated(self),this.handleError)

它不编译。我仍然将回调定义为 private taskCreated (resp: any)

我认为这与链接的问题不太一样。

我错过了什么？

谢谢

Answer 1

你可以试试这个：

private handleError = (error) => {
   this.userInfo = "we have a problem here";
}

Answer 2

您需要 bind 函数本身，而不是 subscribe 方法返回的 Subscription。

onSubmit(form: string): void {
    this.taskService.createTask(task).subscribe(this.taskCreated.bind(this),this.handleError.bind(this))
}

另一种方法是在闭包中：

this.taskService.createTask(task)
        .subscribe(
            (res) => this.taskCreated(res),
            (err) => this.handleError
         )
    }

在 Typescript 中实现此目的的更简洁、更简洁且鲜为人知的方法 是用粗箭头实例化方法本身，从而导致词法 this总是指 class 本身：

onSubmit(form: string): void {
    this.taskService.createTask(task).subscribe(this.taskCreated,this.handleError)
}

private taskCreated = (resp: any) => {
    console.log("Task created successfully",resp)
    this.router.navigate([`/areas/${this.areaCode}`]); // 'this' will refer to class!
}

private handleError = (error: any) => {
    this.userInfoMessage="We've got errors here!"  // 'this' will also refer to the class!
    console.log(error)
}

官方 Typescript 文档建议尽可能不要绑定函数，因此我会使用后两种解决方案之一。

在 api 调用 angular 后重定向到路由（使用 "this"）

Redirect to a route after api call in angular (using "this")

subscribe

angular-ui-router

angular