Q: Angular2: 'switchMap' не существует в типе 'Observable <Params>'

Я изучаю Angular2 и следуя примеру "Tour of Heroes", когда я настраиваю страницу подробностей для маршрутизации, я получил эту ошибку компиляции из webpack:

ERROR in ./ts/router/route-hero-detail.component.ts
(25,23): error TS2339: Property 'switchMap' does not exist on type 'Observable<Params>'.

Я использую webpack для управления пакетом,

ниже приведен код JS:

import 'rxjs/add/operator/switchMap';
import { Component, OnInit }      from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Location }               from '@angular/common';

import { Hero }         from '../hero';
import { HeroService }  from '../hero.service';
@Component({
  moduleId: module.id,
  selector: 'my-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: [ './hero-detail.component.css' ]
})
export class RouteHeroDetailComponent implements OnInit {
  hero: Hero;
 
  constructor(
    private heroService: HeroService,
    private route: ActivatedRoute,
    private location: Location
  ) {}

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

  goBack(): void {
    this.location.back();
  }
}

Ответ 1

Эта проблема исправлена, проверьте ниже:

    this.route.params.forEach((params: Params) => {
      if (params['id'] !== undefined) {
        let id = +params['id'];
        this.heroService.getHero(id)
            .then(hero => this.hero = hero);
      } 
    });

Ответ 2

Вам нужно импортировать оператор switchMap:

import 'rxjs/add/operator/switchMap';

обновление для rxjs >= 5.5.0:

для [email protected] или выше рекомендуется использовать оператор трубы вместо увеличения:

import { switchMap } from 'rxjs/operators';

\\...

this.route.params.pipe(switchMap((params: Params) => /*... */))
  .subscribe(/*... */);
\\...

(это позволяет избежать побочных эффектов и оптимизировать оптимизацию пакетов)

Ответ 3

Я развиваюсь в Visual Studio, а также следую тому же фрагменту учебника Angular2 в документации Angular здесь: https://angular.io/docs/ts/latest/tutorial/toh-pt5.html, и я получаю те же ошибки, что и для switchMap, хотя я используя импорт: import 'rxjs/add/operator/switchMap';.

Я понял, что мое приложение не загружается для меня, потому что файлы .html находятся в папке src/app, даже если учебник Angular говорит вам оставить их в этом каталоге. Никто не сказал мне сделать это - это было случайно, - я переместил как hero-detail.component.html, так и dashboard.component.html в папку /src, а затем приложение начало показывать правильные результаты в браузере.