问：Angular2：'switchMap' 在类型'Observable<Params>' 上不存在

Question

我正在学习 Angular2，并按照“英雄之旅”示例，当我设置路由的详细信息页面时，我从 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();
  }
}

package.json：

{
  "name": "environment",
  "version": "1.0.0",
  "description": "I will show you how to set up angular2 development environment",
  "keywords": [
    "angular2",
    "environment"
  ],
  "scripts": {
    "start": "webpack-dev-server --hot--host 0.0.0.0"
  },
  "author": "Howard.Zuo",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "^2.4.5",
    "@angular/compiler": "^2.4.5",
    "@angular/core": "^2.4.5",
    "@angular/forms": "^2.4.5",
    "@angular/platform-browser": "^2.4.5",
    "@angular/platform-browser-dynamic": "^2.4.5",
    "@angular/router": "^3.4.8",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.20",
    "@types/node": "^7.0.5",
    "bootstrap": "^4.0.0-alpha.6",
    "core-js": "^2.4.1",
    "rxjs": "5.0.3",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.35",
    "ts-loader": "^2.0.0",
    "typescript": "^2.1.5",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  }
}

webpack.config.js：

const path = require('path');

module.exports = {
    entry: {
        index: "./ts/index.ts"
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: 'dist/'
    },
    module: {
        exprContextCritical: false,
        rules: [
            {
                test: /\.ts$/,
                use: ['ts-loader']
            }
        ]
    },
    resolve: {
        extensions: [
            '.js',
            '.ts'
        ]
    }
};

HeroService.ts：

import {Injectable} from '@angular/core';
import {Hero} from './hero';
import {HEROES} from './mock-heroes';
import { Observable } from 'rxjs/Observable'; 

@Injectable()
export class HeroService {
	
    getHeroes() : Promise<Hero[]>{
    return Promise.resolve(HEROES);
  }

	  getHero(id: number): Promise<Hero> {
      return this.getHeroes()
               .then(heroes => heroes.find(hero => hero.id === id));
    }

}

Answer 1

需要导入switchMap操作符：

import 'rxjs/add/operator/switchMap';

rxjs 更新 >=5.5.0：

对于 rxjs@5.5.0 或更高版本，建议使用管道运算符而不是扩充：

import { switchMap } from 'rxjs/operators';

\\...

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

（这样可以避免副作用并实现更好的包大小优化）

Answer 2

import { Observable, of } from 'rxjs';

import { switchMap } from 'rxjs/operators';   


this.user = this.afAuth.authState.pipe(switchMap(user => {

        if (user) {

          return this.afs.doc<User>(`users/${user.uid}`).valueChanges()

        } else {

          return of(null)

        }

      }));

    } 

Answer 3

此问题已修复，请查看以下内容：

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

Answer 4

rxjs 6.x.x 自带的 Angular 6 更新

import { switchMap } from 'rxjs/operators';

然后简单地用管道运算符包装你的 switchMap。

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

Answer 5

import { ActivatedRoute, Params }   from '@angular/router';
import { switchMap } from 'rxjs/operators';
...
ngOnInit(): void {
  this.route.params.pipe(
    switchMap(
      (params: Params) =>
       this.heroService.getHero(+params['id'])))
    .subscribe(hero => this.hero = hero);
}

Answer 6

rxjs 附带的 Angular 7 更新> 6.x.x 你

从 'rxjs/operators' 导入 { switchMap }； 然后简单地用管道运算符包装你的 switchMap。

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

Answer 7

我正在 Visual Studio 中进行开发，并在此处遵循 Angular 文档中的 Angular2 教程的相同部分：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 文件夹中，然后应用程序开始在浏览器中显示正确的结果。