Использование switchMap с обещаниями

Question

Я изучаю Angular2, следуя руководству «Tour of Heroes» на Angular.io. В конце учебника мы настраиваем маршрутизацию на детальную страницу и передаем параметр, указывающий, что герой вытесняется. Это обрабатывается с использованием параметров Observable в ActivatedRoute. Мы используем switchMap для перенаправления из параметров Observable to 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 быть такой же, как в родительской области. Если вы используете .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

Вы не можете использовать this.getHero как в вашем фрагменте кода, потому что

1. это undefined (служба возвращает Observable, что вы должны subscribe перед использованием его данных)
2. это не свойство (не get modifyer).

Answer 3

Вам понадобится bind ваша функция getHero.

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

В противном случае ваши изменения идентичны. Использование bind, как это позволяет вам передать 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'