Question

在遵循Angular教程时，我发现了这一点：

import 'rxjs/add/operator/switchMap';

export class HeroDetailComponent implements OnInit {
  ngOnInit(): void {
    this.route.paramMap
      .switchMap((params: ParamMap) => this.heroService.getHero(+params.get('id')))
      .subscribe(hero => this.hero = hero);
  }
}

很抱歉，如果我发现这有点奇怪（由于两个原因：我来自Java，我不是真的关注最新的JS技术）。 switchMap param map拥有的Observable<ParamMap>方法不是switchMap吗？当我删除import语句时，代码无法编译。

我使用RxJava，但是操作observable所需的所有方法都已经存在（附加）了Observable类本身。

有人可以告诉我，为什么要document.ready()导入？可能，给我一些参考链接。

Answer 1

你可以阅读这篇文章：Where are my Observable operators

许多运营商都失踪了。但这不是错，这是设计的。 Angular不会发送所有可用的运营商。这将导致额外的300 kb。因此，要获得具有更多运算符的Observable，您可以导入所需的运算符，也可以导入所有运算符。

当您构建Web应用程序时，您应该使用较少的http请求，为了获得更好的性能，您应该压缩文件大小。

Answer 2

如果您深入了解node_modules文件夹中的源文件，可能会有所帮助。导入switchMap时，您的打字稿会加载switchMap.d.ts，但已编译的javascript会加载switchMap.js。

switchMap.d.ts有interface Observable<T>的声明，但是当您定义一个与现有接口同名的接口时，typescript将合并两个接口定义。因此，在编译时进行的所有导入都是使用switchMap对任何内容都可以访问新的Observable方法：

import { switchMap } from '../../operator/switchMap';
declare module '../../Observable' {
    interface Observable<T> {
        switchMap: typeof switchMap;
    }
}

另一方面，javascript文件会修改prototype类的Observable。这会将新方法添加到Observable的所有实例中，因此如果不加载此javascript，则该方法根本不存在：

"use strict";
var Observable_1 = require('../../Observable');
var switchMap_1 = require('../../operator/switchMap');
Observable_1.Observable.prototype.switchMap = switchMap_1.switchMap;
//# sourceMappingURL=switchMap.js.map

当然，您不必直接导入switchMap即可存在，如果程序中的任何代码导入它，那么switchMap方法将在运行时存在，但如果您不知道让import打字稿试图阻止你使用它。

为什么需要在RxJ中导入运算符？

2 个答案: