Question

我正在学习Angular2，遵循Angular.io上的“英雄之旅”教程。在本教程结束时，我们将路由设置到详细信息页面并传递指示要移位的英雄的参数。这是使用ActivatedRoute中的params Observable处理的。我们使用switchMap从params Observable重定向到Promise，根据参数返回我们想要的数据。

本教程中使用的语法简洁，因此我尝试将其分解为构建块，以便更好地了解正在发生的事情。具体来说，我试图用实际函数替换右箭头符号，我认为这是相同的。但我的修改不起作用。

以下是代码：

ngOnInit(): void {
        this.route.params
        .switchMap((params: Params) => this.heroService.getHero(+params['id']))
        //.switchMap(this.getHero)
        .subscribe(hero => this.hero = hero);
    }

    getHero(params: Params) : Promise<Hero> {
        return this.heroService.getHero(+params['id']);
    }

令我困惑的是为什么使用当前已注释掉的行而不是上面的行，我收到错误："Cannot read property 'getHero' of undefined."两个版本的代码看起来与我相同。

Answer 1

Fat-arrow函数保留执行的上下文，允许this＆＃34;变量＆＃34;与父范围中的相同。如果您使用.switchMap(this.getHero)，那么this将指向其他内容，而不是组件。

getHero(params: Params) : Promise<Hero> {
    // "this" is not what you expect here
    return this.heroService.getHero(+params['id']);
}

所以这里this.heroService未定义。

Answer 2

您需要bind您的getHero功能。

.switchMap(this.getHero.bind(this))

否则您的更改是相同的。使用像这样的绑定允许您将getHero作为独立函数传递给switchMap，而不会丢失this对它的含义。

您可以尝试一下：

'use strict';
const foo = { 
  bar: 'baz',
  getBar: function() {
    return this.bar;
  }
};

foo.getBar();
// => 'baz'

const myGetBar = foo.getBar;
myGetBar();
// => TypeError: Cannot read property 'bar' of undefined

const boundGetBar = foo.getBar.bind(foo);
boundGetBar();
// => 'baz'

const otherObj = { bar: 'hi' };
const otherBoundGetBar = foo.getBar.bind(otherObj);
otherboundGetBar();
// => 'hi'

otherObj.getBar = myGetBar;
otherObj.getBar();
// => 'hi'

Answer 3

您不能在代码段中使用this.getHero，因为

它的undefined（服务在使用其数据之前返回Observable所需的subscribe
它不是属性（没有get修改者）。

将switchMap与Promises一起使用

3 个答案: