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

不同路由上的组件不会触发BehaviourSubject订阅

不同路由上的组件不会触发BehaviorSubject订阅是因为BehaviorSubject是一种可观察对象(Observable),它可以被多个观察者订阅并接收到最新的值。当一个组件订阅了BehaviorSubject后,它会立即接收到BehaviorSubject的当前值或者是默认值(如果没有发出任何值)。然后,每当BehaviorSubject的值发生变化时,订阅者会收到最新的值。

然而,在Angular中,当不同的组件位于不同的路由上时,它们实际上是通过路由器进行加载和销毁的。当一个组件被销毁时,它的订阅也会被取消,这意味着它将不再接收到BehaviorSubject的更新。

这是因为每个路由都有自己的组件树,每个组件树都有自己的实例。当切换到不同的路由时,之前的组件树会被销毁,新的组件树会被创建。因此,不同路由上的组件实际上是不同的实例,它们之间的订阅是相互独立的。

如果你希望在不同路由上的组件之间共享BehaviorSubject的值,可以考虑使用共享服务(Shared Service)来管理BehaviorSubject的订阅和更新。共享服务是一个单例服务,它可以在整个应用程序中共享数据和状态。通过在共享服务中创建BehaviorSubject实例,并在需要订阅的组件中注入该服务,不同路由上的组件就可以共享同一个BehaviorSubject的值了。

以下是一个示例共享服务的代码:

代码语言:txt
复制
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class SharedService {
  private dataSubject = new BehaviorSubject<string>('');

  getData() {
    return this.dataSubject.asObservable();
  }

  updateData(value: string) {
    this.dataSubject.next(value);
  }
}

在需要订阅BehaviorSubject的组件中,注入共享服务并订阅它:

代码语言:txt
复制
import { Component, OnInit } from '@angular/core';
import { SharedService } from 'path/to/shared.service';

@Component({
  selector: 'app-component',
  template: `
    <div>{{ data }}</div>
  `,
})
export class MyComponent implements OnInit {
  data: string;

  constructor(private sharedService: SharedService) {}

  ngOnInit() {
    this.sharedService.getData().subscribe(value => {
      this.data = value;
    });
  }
}

这样,无论这个组件是在哪个路由上,它都可以订阅共享服务中的BehaviorSubject,并接收到最新的值。

对于腾讯云相关产品,推荐使用腾讯云的云服务器(CVM)来进行服务器运维,腾讯云数据库(TencentDB)来进行数据库存储,腾讯云函数(SCF)来进行云原生应用开发,腾讯云CDN(Content Delivery Network)来进行网络通信加速,腾讯云安全产品(云安全中心、DDoS防护、Web应用防火墙等)来进行网络安全保护。具体产品介绍和链接地址可以参考腾讯云官方网站。

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

相关·内容

2020年Vue面试题汇总

另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们, 否则vue只会替换其内部属性而不会触发过渡效果。...$parent.event来调用父组件的方法。 第二种方法是在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了。...(6)keep-alive内置组件的作用 可以让当前组件或者路由不经历创建和销毁,而是进行缓存,凡是被keep-alive组件包裹的组件,除了第一次以外。不会经历创建和销毁阶段的。...那么,我们可以使用v-if=”false”作为递归组件的结束条件。当遇到v-if为false时,组件将不会再进行渲染。 vue核心知识——路由 1.怎么定义vue-router的动态路由?...path 参数会显示在路径上,刷新不会被清空 (2)使用Query: 参数会显示在路径上,刷新不会被清空 name 可以使用path路径 vue核心知识——vuex 不用Vuex

2.8K20
  • BuildAdmin13:区区重新加载,vue居然用了mitt事件总线库

    是上一篇讲的子组件调用父组件方法的那个emit吗?我们接着往下看。 mitt:事件总线 eventBus,事件总线。mitt是一个事件总线库,基于发布订阅事件在不同组件内进行通信。...订阅方通过事件名称来接受到事件,然后就可以收到传过来的参数。 订阅 mitt通过on来订阅事件,然后定义一个方法,来接收处理事件传过来的参数。 this....main 在第二篇的布局中,或者说在ElementPlus的布局组件中,main是路由中展示页面的地方,router-view根据router的跳转,来加载不同的页面。...还要一种需要添加组件缓存的情况,就是首次访问应用,第一个tab(控制台)的渲染,没有触发路由变化,也就不会触发添加缓存。...然后才是在路由导航守卫赋值。 这个具体可以看之前讲的tabs的实现。 至此,就完成了组件缓存,在页面的修改也不会随着tab的切换而消失。

    34700

    Vue知识点

    中,而Model 数据的变化也会立即反应到View 上。...)来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调 什么是数据劫持?...:组件销毁时触发 在此阶段可以做的事情:可向用户询问是否销毁 8.destroyed —销毁后 触发的行为:组件销毁时触发,vue实例解除了事件监听以及和dom的绑定(无响应了),但DOM节点依旧存在...hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.xxx.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。...---- 7、assets和static目录区别 共同点:都是放静态资源的 不同点: static:目录下文件不会被webpack处理,打包后直接输出到dist/static中;任何放在 static

    68420

    React第三方组件1(路由管理之Router的使用④按需加载-上)

    你可以进入历史消息查看以往文章,也敬请期待我们的新文章!...1、React第三方组件1(路由管理之Router的使用①简单使用)---2018.01.22 2、React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)---2018.01.23...3、React第三方组件1(路由管理之Router的使用③传参)---2018.01.24 4、React第三方组件1(路由管理之Router的使用④按需加载-上)---2018.01.25 5、React...第三方组件1(路由管理之Router的使用⑤按需加载-下)---2018.01.26 开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2 既然我们都用上了路由了...浏览器效果应该是这样的! ? 我们把demo1,demo2两个页面内容用路由方式放到 demo演示页面中。

    1.7K40

    前端面试题 --- Vue部分

    ()方法,并触发Compile中绑定的更新函数 4、实现一个订阅器 dep:采用发布者订阅者模式,用来收集订阅者的 watcher,对监听器 observer 和订阅者 watcher 进行统一管理 vue3...它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。...; 只是会检测到你写在watch里的那些属性,没写的就不会触发。...,然而和守卫不同的是,这些钩子不会接受 next 函数也不会改变导航本身: 二:组件级路由守卫 放在要守卫的组件里,跟data和methods同级 beforeRouteEnter 进入路由前,此时实例还没创建...这个值是我们要传递的参数 动态路由匹配本质上就是通过url进行传参 比如在写一个商品详情页面的时候,我们的页面结构都一样,只是渲染的数据不同而已,这时候就可以根据商品的不同id去设置动态路由,只需要写一个组件

    2K20

    19 道高频 vue 面试题解答(下)

    ,但是在不同的场景中,该行为有不同的实现方案-比如选项的合并策略...其他模式欢迎补充生命周期钩子是如何实现的Vue 的生命周期钩子核心实现是利用发布订阅模式先把用户传入的的生命周期钩子订阅好(内部采用数组的方式存储...双向数据绑定的原理Vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调...我们在 vue 项目中主要使用 v-model 指令在表单 input、textarea、select 等元素上创建双向数据绑定,我们知道 v-model 本质上不过是语法糖,v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件...,但是在不同的场景中,该行为有不同的实现方案-比如选项的合并策略Vue性能优化编码优化:事件代理keep-alive拆分组件key 保证唯一性路由懒加载、异步组件防抖节流Vue加载性能优化第三方模块按需导入...执行beforeRouteEnter 守卫中传给 next 的回调函数触发钩子的完整顺序路由导航、keep-alive、和组件生命周期钩子结合起来的,触发顺序,假设是从a组件离开,第一次进入b组件∶beforeRouteLeave

    1.9K00

    【愚公系列】2023年03月 其他-Web前端基础面试题(VUE专项_58道)

    ,由于数据对象都指向同一个data对象,当在一个组件中修改data时,其他重用的组件中的data会同时被修改;而使用返回对象的函数,由于每次返回的都是一个新对象(Object的实例),引用地址不同,则不会出现这个问题...引用信息将会注册在父组件的 $refs 对象上。...如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例 24、Vue的路由hash模式 和 history模式的区别 hash模式在浏览器中有个符号“...43、vue-router 路由钩子函数是什么?执行顺序是什么? 路由钩子的执行流程,钩子函数种类有:全局守卫、路由守卫、组件守卫。 完整的导航解析流程: 1、导航被触发。...keep-alive 运用了 LRU 算法,选择最近最久未使用的组件予以淘汰。 52、Vue.set 方法原理 了解 Vue 响应式原理的同学都知道在两种情况下修改 Vue 是不会触发视图更新的。

    7.3K20

    vue面试考察知识点全梳理

    本质上是发布订阅模式(观察者模式)。2. 依赖收集所以在 vm._render() 过程中,会触发所有数据的 getter,这样实际上已经完成了一个依赖收集的过程。...在定义相应式对象的的getter函数里,触发dep.depend做依赖收集,将获取属性的地方全部加入订阅者列表中,当数据发生变化时,通过遍历订阅者列表实现变更发布。...派发更新实际上就是当数据发生变化的时候,触发 setter 逻辑,把在依赖过程中订阅的的所有观察者,也就是 watcher,都触发它们的 update 过程,这个过程又利用了队列做了进一步优化,在 nextTick...依赖属性更新:计算属性会成为依赖变量的订阅者,依赖变量发生改变则触发计算属性重新计算。...;七、vue-router路由的功能是统筹分发,告诉什么人应该干什么事情,对前端来说就是将不同的路径映射到不同的功能(视图)上去。

    80220

    vue面试考察知识点全梳理

    本质上是发布订阅模式(观察者模式)。2. 依赖收集所以在 vm._render() 过程中,会触发所有数据的 getter,这样实际上已经完成了一个依赖收集的过程。...在定义相应式对象的的getter函数里,触发dep.depend做依赖收集,将获取属性的地方全部加入订阅者列表中,当数据发生变化时,通过遍历订阅者列表实现变更发布。...派发更新实际上就是当数据发生变化的时候,触发 setter 逻辑,把在依赖过程中订阅的的所有观察者,也就是 watcher,都触发它们的 update 过程,这个过程又利用了队列做了进一步优化,在 nextTick...依赖属性更新:计算属性会成为依赖变量的订阅者,依赖变量发生改变则触发计算属性重新计算。...;七、vue-router路由的功能是统筹分发,告诉什么人应该干什么事情,对前端来说就是将不同的路径映射到不同的功能(视图)上去。

    85520

    vue面试考察知识点全梳理3

    本质上是发布订阅模式(观察者模式)。2. 依赖收集所以在 vm._render() 过程中,会触发所有数据的 getter,这样实际上已经完成了一个依赖收集的过程。...在定义相应式对象的的getter函数里,触发dep.depend做依赖收集,将获取属性的地方全部加入订阅者列表中,当数据发生变化时,通过遍历订阅者列表实现变更发布。...派发更新实际上就是当数据发生变化的时候,触发 setter 逻辑,把在依赖过程中订阅的的所有观察者,也就是 watcher,都触发它们的 update 过程,这个过程又利用了队列做了进一步优化,在 nextTick...依赖属性更新:计算属性会成为依赖变量的订阅者,依赖变量发生改变则触发计算属性重新计算。...;七、vue-router路由的功能是统筹分发,告诉什么人应该干什么事情,对前端来说就是将不同的路径映射到不同的功能(视图)上去。

    84230

    前端Vue框架面试题大全

    可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。updated(更新后) 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。...通过pushState()方法或replaceState()方法可以修改url的地址,并在popstate事件中能监听地址的改变,不同的是,手动的进行pushState()并不会触发popstate事件...,也不会报 404 方案题:不同前端技术栈的项目,如何实现一套通用组件方案?...另外,该事件只针对同一个文档,如果浏览历史的切换,导致加载不同的文档,该事件也不会触发。 用法:使用的时候,可以为popstate事件指定回调函数。...Vue 不同点是: 计算属性compute是基于他们的依赖(如果是实例范畴之外的依赖,比如非响应式的not reactive是不会触发属性更新的)进行缓存(计算属性的结果会被缓存),只有相关依赖会发生改变时才会重新求值

    1.9K60

    面试中Vue被问的最多的题目是哪些?

    Model 中,而 Model 数据的变化也会立即反应到 View 上。...视图(View)可以独立于 Model 变化和修改,一个 ViewModel 可以绑定到不同的"View"上,当 View 变化的时候 Model 可以不变,当 Model 变化的时候 View 也可以不变...销毁前/后:在执行 destroy 方法后,对 data 的改变不会再触发周期函数,说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定,但是 dom 结构依然存在 组件之间的传值?...-订阅者模式的方式,通过 Object.defineProperty()来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。...特性是什么 action 类似于 muation, 不同在于:action 提交的是 mutation,而不是直接变更状态 action 可以包含任意异步操作 vue 中 ajax 请求代码应该写在组件的

    1.5K20

    【Vuejs】778- 超全 Vuejs 知识点(基础到进阶)

    订阅者 Watcher:Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ,主要的任务是订阅 Observer 中的属性值变化的消息,当收到属性值变化的消息时,触发解析器...store.dispatch 在不同模块中可以触发多个 action 函数。...所以为了保证组件不同的实例之间data不冲突,data必须是一个函数。 子组件为什么不可以修改父组件传递的Prop?/怎么理解vue的单向数据流?...v-model是用来在表单控件或者组件上创建双向绑定的 他的本质是v-bind和v-on的语法糖 在一个组件上使用v-model,默认会为组件绑定名为value的prop和名为input的事件 nextTick...路由懒加载的含义:把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件 实现:结合 Vue 的异步组件和 Webpack 的代码分割功能 1.

    3.3K51

    react hooks 全攻略

    这就意味着我们无法在函数组件中创建一个持久存在的变量。 这时候就可以使用 useRef 来解决这个问题。useRef 可以用于在函数组件中存储和访问可变的数据,这些数据不会触发组件重新渲染。...当我们修改这个 current 属性的值时,组件的重新渲染不会受到影响。...存储组件内部的值:可以使用 useRef 来存储某些组件内的值,类似于类组件中的实例变量。与状态 Hook(如 useState)不同,使用 useRef 存储的值的更改不会触发组件的重新渲染。...示例 2:只有当 MyBtn 的 props 发生改变时,才会触发组件内部渲染,如果不使用 useMemo,则父组件中状态改变后,子组件重新渲染你导致 时间戳每次不同 。...# useCallback useCallback 作用是缓存回调函数,通过使用 useCallback,我们可以确保在依赖项不发生变化时,不会重新创建同一个函数,从而避免不必要的子组件重渲染或副作用函数的触发

    44940

    Vue.js笔试题解决业务中常见问题

    6.active-class是哪个组件的属性 它是vue-router模块的router-link组件的属性 7.如何定义vue-router的动态路由 在静态路由名称前面添加冒号,如设置id动态路由参数...提供的属性特性功能,结合发布者-订阅者模式,通过Object.defineProperty()为各个属性定义get,set特性方法,在数据发送改变时给订阅者发布消息,触发相应的监听回调。...包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。是一个抽象组件,它自身不会渲染一个DOM元素,也不会出现在父组件链中。...在style上加上scoped可以让样式私有化,只针对当前vue.js文件中的代码有效,不会对别的文件中的代码造成影响,有时,引入第三方UI,在vue.js文件中进行样式覆盖不生效,大概是因为style...上的scoped导致的。

    12.5K10

    以常见业务为中心的Vue面试题,真香!

    6.active-class是哪个组件的属性 它是vue-router模块的router-link组件的属性 7.如何定义vue-router的动态路由 在静态路由名称前面添加冒号,如设置id动态路由参数...提供的属性特性功能,结合发布者-订阅者模式,通过Object.defineProperty()为各个属性定义get,set特性方法,在数据发送改变时给订阅者发布消息,触发相应的监听回调。...包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。是一个抽象组件,它自身不会渲染一个DOM元素,也不会出现在父组件链中。...在style上加上scoped可以让样式私有化,只针对当前vue.js文件中的代码有效,不会对别的文件中的代码造成影响,有时,引入第三方UI,在vue.js文件中进行样式覆盖不生效,大概是因为style...上的scoped导致的。

    11.4K30

    2021Vue.js面试题汇总及答案【全网最全 建议收藏】「建议收藏」

    一句话总结: vue.js 采用数据劫持结合发布-订阅模式,通过 Object.defineproperty 来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发响应的监听回调...setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。...” 作用在组件上, 本质是一个父子组件通信的语法糖,通过prop和 event.target.value“作用在组件上,本质是一个父子组件通信的语法糖,通过prop和.emit实现, 等同于:value...(获取异步数据等) 可复用组件不会因组件使用的位置、场景而变化。...实现路由懒加载(动态加载路由) 把不同路由对应的组件分割成不同的代码块,然后当路由被访问时才加载对应的组件即为路由的懒加载,可以加快项目的加载速度,提高效率 const router = new VueRouter

    8.7K30

    Vue 面试题汇总

    它有哪些组件 vue-router 是 vue 的路由插件, 组件:router-link router-view 11、vue 的双向绑定的原理是什么 vue.js 是采用数据劫持结合发布者-订阅者模式的方式...,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。...更新前/后:当data变化时,会触发beforeUpdate和updated方法 销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom...视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变 可重用性。...客户端 entry 主要作用挂载到 DOM 上,服务端 entry 除了创建和返回实例,还进行路由匹配与数据预获取。

    3K30
    领券