首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

angular -当使用switchMap通过http.get连接route.parame时,为什么可观察到的链不终止

Angular是一种流行的前端开发框架,用于构建单页应用程序。它使用TypeScript编写,并提供了丰富的工具和库来简化开发过程。

在Angular中,可观察对象(Observable)是一种用于处理异步数据流的强大工具。当使用switchMap操作符通过http.get连接route.param时,可观察对象的链不终止的原因可能是由于以下几个因素:

  1. 异步操作未完成:当使用http.get方法发送HTTP请求时,它是一个异步操作。如果在请求完成之前,可观察对象的链就终止了,那么可能无法获取到完整的数据。因此,可观察对象的链会继续执行,直到异步操作完成。
  2. 错误处理:如果在可观察对象的链中发生错误,链也不会终止。相反,它会继续执行错误处理逻辑,以便进行适当的错误处理和反馈。
  3. 路由参数变化:当使用route.param时,可观察对象的链会根据路由参数的变化而更新。如果路由参数发生变化,可观察对象的链会重新执行,以获取新的数据。

为了解决可观察对象链不终止的问题,可以采取以下措施:

  1. 使用takeUntil操作符:可以创建一个Subject对象,并在组件销毁时通过调用next方法来终止可观察对象的链。在组件的ngOnDestroy生命周期钩子中,订阅该Subject对象,并在需要时调用next方法来终止链。
  2. 使用unsubscribe方法:在订阅可观察对象时,将订阅对象保存在组件的属性中。在组件销毁时,调用unsubscribe方法来终止可观察对象的链。
  3. 使用async管道:在模板中使用async管道来订阅可观察对象,并自动处理订阅和取消订阅的逻辑。这样可以确保在组件销毁时,自动取消订阅可观察对象。

总结起来,当使用switchMap通过http.get连接route.param时,可观察对象的链不终止可能是由于异步操作未完成、错误处理或路由参数变化等原因。为了解决这个问题,可以使用takeUntil操作符、unsubscribe方法或async管道来终止可观察对象的链。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart4.0 英雄之旅-教程-08HTTP 顶

在进行更改时,请通过重新加载浏览器窗口来保持运行。 提供HTTP服务 您将使用Dart http软件包的客户端类与服务器进行通信。...通过id获取英雄 当HeroDetailComponent要求HeroService获取一个英雄时,HeroService当前获取所有英雄并且过滤器以id匹配一个hero。...当应用程序使用模拟英雄列表时,更新直接应用于单个应用程序范围的共享列表中的英雄对象。 现在,您正在从服务器获取数据,如果您希望更改持续存在,则必须将其写回服务器。...if (name.isEmpty) return; heroes.add(await _heroService.create(name)); selectedHero = null; } 当给定的名字不是空白时...transform(switchMap(...))为通过debounce()和distinct()创建的每个搜索项调用搜索服务。 它取消并放弃以前的搜索,只返回最新的搜索服务流元素。

11K30
  • 响应式脑电波 — 如何使用 RxJS、Angular、Web 蓝牙以及脑电波头戴设备来让我们的大脑做一些更酷的事

    在参加 ng-cruise 时,我遇到了 Alex Castillo,他的演讲展示了如何将他叫做 OpenBCI 的开源硬件脑电波头戴设备与 Angular 进行连接并将信号可视化。...我们的眼睛:角膜前方带正电,视网膜背部带负电 我们将使用这些电极的信号作为我们脑电图程序的 “Hello World”, 该程序会通过监测眼睛活动来检测眨眼。 开始编码!...这会过滤掉我们所看到的多余的 “Blink!”: ? 那么 switchMap 到底施了什么魔法?简单来说,每当一个新项到达时,switchMap 会抛弃前一个流并调用给定的函数来产生新的流。...无论采用哪种方式,我建议每次只眨一只眼睛,这样可以确保你能观察到你的代码是否正常工作?!...如今,像你我一样的 Web 开发者都可以使用我们每天都在使用的开发工具 (浏览器、RxJS 和 Angular ) ,轻而易举地来连接和分析脑电波数据。

    2.3K80

    构建流式应用:RxJS 详解

    ,但存在两个较大的问题: 多余的请求 当想搜索“爱迪生”时,输入框可能会存在三种情况,“爱”、“爱迪”、“爱迪生”。...订阅:通过 addEventListener 订阅 document.body 的 click 事件。 发布:当 body 节点被点击时,body 节点便会向订阅者发布这个消息。...JavaScript 中像 Array、Set 等都属于内置的可迭代类型,可以通过 iterator 方法来获取一个迭代对象,调用迭代对象的 next 方法将获取一个元素对象,如下示例。...无更多值(已完成) 当无更多值时,next 返回元素中 done 为 true。...complete() 当不再有新的值发出时,将触发 Observer 的 complete 方法;而在 Iterator 中,则需要在 next 的返回结果中,当返回元素 done 为 true 时,则表示

    7.4K31

    Angular面试题_session面试题

    可以用来 优化 Angular 应用的性能 的办法: 减少监控项(比如对不会变化的数据采用单向绑定) 主动设置索引(指定 track by ,简单类型默认用自身当索引,对象默认使用..., 对树操作时,由于跟扁平数据同一引用,树状数据变更会同步到原始的扁平数据) 另外,对于Angular1.x ,存在 脏检查 和 模块机制 的问题。...4.移动端 可尝试 Ionic,但并不完善。 参考 如何看2015年1月Peter-Paul Koch对Angular的看法?...function myCtrl(){ // 使用 vm 捕获 this 可避免内部的函数在使用 this 时导致上下文改变 var vm = this; vm.a = ‘aaa’; }...原理 AngularJS 是通过构造函数的参数名字来推断依赖服务名称的,通过 toString() 来找到这个定义的 function 对应的字符串,然后用正则解析出其中的参数(依赖项),再去依赖映射中取到对应的依赖

    4.9K150

    RxJS速成 (下)

    下面是一个angular 5的例子: app.component.html: 从Subject共享Observable到多个Subscribers <input type="text"...merge 把多个输入的observable交错的混合成一个observable, 不按顺序. ?...switchMap switchMap把每个值都映射成Observable, 然后使用switch把这些内部的Observables合并成一个. switchMap有一部分很想mergeMap, 但也仅仅是一部分像而已...例子:  // 立即发出值, 然后每5秒发出值 const source = Rx.Observable.timer(0, 5000); // 当 source 发出值时切换到新的内部 observable...: 网速比较慢的时候, 客户端发送了多次重复的请求, 如果前一次请求在2秒内没有返回的话, 那么就取消前一次请求, 不再需要前一次请求的结果了, 这里就应该使用debounceTime配合switchMap

    2.2K40

    ✨从异步讲起,时间,时间,请给函数以答案!

    探秘 JS 异步 JavaScript 除了“闭包”这个最经典的设计之外,还有它是“单线程”的设计,一样可奉为最经典!...④ 响应式 处理多个异步操作数据流是很复杂的,尤其是当它们之间相互依赖时,我们可以用更巧妙地方式将它们组合:响应式处理异步,Observer 登场!...的结果数组; map — 从 API 函数 A 和 B 的 Respond 中提取 ID; switchMap — 使用前一个结果的 id 调用 callApiFooC,并返回一个新的 Observable...,新 Observable 是 callApiFooC( resIds ) 的返回结果; switchMap — 使用函数 callApiFooC 的结果调用 callApiFooD; tap — 获取先前执行的结果...它在 Angular 等前端框架中被使用。 这样做有何好处?核心好处是分离 创建(发布)  和 调用(订阅消费) 。 异步与回调的核心意义不正在于此吗?

    1.1K20

    跟我学Rx编程——惯性滑动

    但有的时候我们需要使用类似的逻辑,比如我需要在手指滑动后,通过一些列序列帧变化来显示动画,那么这时候就可能需要开发者自己来写这个惯性滑动的逻辑了。...,如果已经接收过了,我们就用之前数据创建一个新的aac对象,为什么要创建一个新的对象呢,因为原来的对象会被复用,出现脏数据。...aac.lastTs = aac.timeStamp 第五、六两行,是把本次的y坐标和时间戳存起来,作为下一次计算时使用的数据 aac.stageY = stageY aac.timeStamp = timeStamp...switchMap就是上述行为发生的时候,我们开始监听switchMap传入的函数所返回出来的那个事件流。...的行为),但由于我们终止只是switchMap内部的事件流,并不会终止外层的事件流,所以只要用户继续按下手指滑动,逻辑又会再次启动。

    71420

    ViewModel 和 LiveData:为设计模式打 Call 还是唱反调?

    例如,当操作系统因资源不足杀死进程时。 为了高效地保存和恢复 UI 状态,组合使用 onSaveInstanceState() 和 ViewModel。...但是,如果用户旋转手机,则新的 Activity 被创建并开始观察这个字段。当对 LiveData 的观察开始时,Activity 会立即收到已经使用过的值,这将导致消息再次显示!...Transformations.switchMap 允许你创建响应其他 LiveData 实例的改变的 LiveData ,它还允许在调用链上传递观察者的生命周期信息: LiveData repo...当一个 Activity 观察到repo 时,相同的 LifecycleOwner 将用于 repository.loadRepo(id) 调用。...✅ 当需要在 ViewModel 中需要 Lifecycle 对象时,使用 Transformation 可能是个好办法。

    3.1K30

    Java 设计模式最佳实践:六、让我们开始反应式吧

    当观察者发射数据时,观察者通过消耗或转换数据做出反应。这种模式便于并发操作,因为它不需要在等待可观察对象发出对象时阻塞。...下面的代码显示,使用一个元素的窗口不起任何作用,同时使用三个元素输出它们的总和: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RwOERutY-1657721282493...连接运算符 通过调用以下方法之一,可以基于给定窗口组合两个可观察对象: join:使用聚合函数,根据重叠的持续时间,将两个可观察对象发出的项目连接起来 groupJoin:使用聚合函数,根据重叠的持续时间...:订阅、终止、完成或错误,最后通过在每个事件上注册控制台打印操作。...当连接到无响应的 Web 服务时,尤其是从每次重试都会消耗设备电池的移动设备时,可以使用此方法: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aXhV9JCk-1657721282499

    1.8K20

    在 vue 项目中使用各种 javascript 类库

    ,因此会导致尝试访问这个原型的时候会抛出一个错误并终止它。...不过在这里它可以给我们明显的好处:通过描述符去创建的属性默认是只读的。 这意味着那些一时失了智的开发者(或者就是你自己)不会有机会干出一些类似下面这个组件中那样的蠢事,进而搞坏整锅粥。 this....这样做的一个后果是,与使用全局变量不一样,你必须确保使用类库时处于一个正确的作用于中。 比如在内部回调函数中你就不能访问的到 this 上的类库。...$http.get('/') // etc // Only works in a fat arrow callback. } }); 为什么不把它作为一个插件呢?...,就像我们使用 Vue Router,Vuex 又或者其他可以通过 Vue.use 使用的插件那样。

    2.1K10
    领券