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

为什么当我进入另一个组件(角度2/4/5)的Subject调用的订阅方法时,在控制台中看不到我的根变量组件?

当您进入另一个组件的Subject调用的订阅方法时,在控制台中看不到根变量组件的原因可能是因为作用域的限制。在订阅方法中,您只能访问当前组件的作用域内的变量,而无法直接访问根变量组件。

解决这个问题的一种方法是使用Angular的依赖注入机制。通过在根组件中创建一个共享的服务,并将其注入到需要访问根变量的组件中,您可以在订阅方法中通过该服务访问根变量。

以下是一个示例:

  1. 创建一个共享的服务,例如RootDataService:
代码语言:txt
复制
import { Injectable } from '@angular/core';

@Injectable()
export class RootDataService {
  rootVariable: any;
}
  1. 在根组件中将根变量赋值给该服务:
代码语言:txt
复制
import { Component } from '@angular/core';
import { RootDataService } from './root-data.service';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <!-- 根组件的模板 -->
    </div>
  `,
})
export class AppComponent {
  constructor(private rootDataService: RootDataService) {
    this.rootDataService.rootVariable = 'Hello World';
  }
}
  1. 在需要访问根变量的组件中注入该服务,并在订阅方法中使用它:
代码语言:txt
复制
import { Component, OnInit } from '@angular/core';
import { RootDataService } from './root-data.service';

@Component({
  selector: 'app-other-component',
  template: `
    <div>
      <!-- 其他组件的模板 -->
    </div>
  `,
})
export class OtherComponent implements OnInit {
  constructor(private rootDataService: RootDataService) {}

  ngOnInit() {
    // 在订阅方法中使用根变量
    this.rootDataService.rootVariable.subscribe((value) => {
      console.log(value);
    });
  }
}

通过以上步骤,您可以在订阅方法中访问根变量,并在控制台中看到其值。

对于以上问题的解答,腾讯云提供了一系列云计算产品,例如云服务器、云数据库、云存储等,可以帮助您构建和部署应用程序。您可以访问腾讯云官方网站(https://cloud.tencent.com/)了解更多相关产品信息。

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

相关·内容

一个Angular 5教程:一步一步指导实现你第一个Angular 5应用程序

但在基本层面上,请考虑如下这些方法创建组件之后立即调用构造函数,传递给它数据准备好并填充之前很久才调用该构造函数,而ngOnInit仅在第一个更改周期数据,因此您可以访问组件输入。...当我们描述了我们组件职责,显然这应该是一个卡片列表组件。...我们我们组件订阅我们观察器。它们被用在我们应用程序不同部分,所以它们可能会一路销毁 - 例如,当我路由中使用组件作为页面(我们将在本指南后面讨论路由)。...所以当我们添加一张新卡到我们的卡片收藏,它会被输出。所以我们不需要自己添加该卡,或者我们需要take(1)该管道中使用操作员。它将采取一个单一价值,并取消订阅。...你remove action现在可以用同样方法当我们从订阅中获取数据,您只需要实现该Remove效果。但我会把它留给你。 路由和模块 我们来谈谈我们应用程序组合。

42.5K10

Rxjs 响应式编程-第三章: 构建并发程序

例如,当我们需要缓存值,RxJSSubject Class(后面会讲到)可以提供很多帮助,当我们需要跟踪游戏先前状态,我们可以使用像Rx.Observable.scan这样方法。...一个Observable中,我们订阅它之前,没有任何事情发生过,无论我们应用了多少查询和转换。 当我调用像map这样变换,我们其实只运行了一个函数,它将对数组每个项目进行一次操作。...实现移动星星唯一方法订阅Observable并使用生成数组调用paintStars。...如果我们订阅了SpaceShip Observable并在订阅调用了drawTriangle,我们太空船只有我们移动鼠标才能看到,而且只是瞬间。...中看到我们也随机改变x坐标,这样敌人就会无法预测地移动到两侧。

3.5K30

RxJS & React-Observables 硬核入门指南

8 Observer 2: 9 Observer 2: 10 */ 输出中,可以注意到第二个Observer从1开始打印,尽管它在5秒后订阅了。...所有观众都在同一间观看相同内容同一片段。 示例:让我们创建一个Subject10秒内触发1到10。然后,立即订阅一次Observable, 5秒后再订阅一次。...这是因为第二个观察者共享同一个Subject。由于Subject5秒后订阅,所以它已经完成了1到4发送。这说明了Subject多播行为。...但我讨厌redux- tank,我喜欢它,我每天都在使用它! 练习1:调用API 用例:调用API来获取文章注释。当API调用正在进行时显示加载器,并处理API错误。...当我们开始使用全局变量,我们action creator就不再是纯函数了。对使用全局变量action creator进行单元测试也变得很困难。

6.8K50

Flutter响应式编程:Streams和BLoC

订阅Stream这种类型Stream只允许该Stream整个生命周期内使用单个监听器。即使第一个订阅被取消后,也无法在此类流上收听两次。...它给你: 构建仅负责特定活动部分应用程序机会, 轻松模拟一些组件行为,以允许更完整测试覆盖, 轻松重用组件(当前应用程序或其他应用程序中其他位置), 重新设计应用程序,并能够不进行太多重构情况下将组件从一个地方移动到另一个地方...然而, 一个InheritedWidget没有提供任何dispose方法,请记住,不再需要资源总是释放资源是一种很好做法。...这三点解释了我为什么选择通过StatefulWidget实现BlocProvider,这样做可以让我Widget dispose释放相关资源。...不同BLoCs / Streams编排 下图显示了如何使用主要3个BLoC: BLoC左侧,哪些组件调用Sink 右侧,哪些组件监听流 例如,当MovieDetailsWidget调用inAddFavorite

4.1K90

Angular进阶教程2-

依赖注入与HTTP介绍 为什么使用服务?...属性则代表使用哪个服务类来创建实例 }) 复制代码 模块中注入服务 组件\color{#0abb3c}{组件}组件中注入服务,在所有的子组件\color{#0abb3c}{子组件}子组件中都能共享...服务类中注入服务 // 这种注入方式,会告诉Angular注入器中注册这个服务,这也是使用CLI生成服务默认方式. // 这种方式注册,不需要再@NgModule装饰器中写providers,...RxJS中核心概念(Observable 、Observer 、Subscription、SubjectAngular项目中我们调用接口时候,常用调用方式是: this....Subject是观察者\color{#0abb3c}{观察者}观察者: 它有next(v),error(e),和complete()方法,如果我们需要给subject提供新值,只要调用next(v),它会将值多播给已注册监听该

4.1K30

Reduxreact-reduxredux中间件设计实现剖析

redux设计思路及实现原理 react-redux设计思路及实现原理 redux&#x4E2D;य़4;&#x4EF6;设计思路及实现原理 一. redux实现 一切开始之前,我们首先要回答一个问题...(有些地方写是发布订阅模式,但我个人认为这里称为观察者模式更准确,有关观察者和发布订阅区别,讨论有很多,读者可以搜一下) 所谓观察者模式,概念很简单:观察者订阅被观察者变化,被观察者发生改变,通知所有的观察者...//观察者2 subject.addObserver(ob1) //观察者1订阅subject通知 subject.addObserver(ob2) //观察者2订阅...subject通知 subject.notify() //发出广播,执行所有观察者update方法 解释一下上面的代码:观察者对象有一个update方法(收到通知后要执行方法...可以看到,控制台先输出了中间件logger1打印结果,然后进入thunk中间件打印了'thunk',等待一秒后,异步dispatch被触发,又重新走了一遍logger1 -> thunk -> logger2

2.2K20

「译」为 JavaScript 开发者准备 Flutter 指南

我过去几年看过所有前端技术中,我尝试了 Flutter 后最为兴奋。在这篇文章中,我将讨论为什么它令我如此激动,并介绍如何尽快开始使用它。...void main() { runApp(new MyApp());} 这个函数调用 new MyApp () ,它本身调用一个类等等,类似于 React app,我们有一个由其他组件组成组件,...有状态组件可以创建状态、更新状态和销毁状态,这在某种程度上类似于用 React 可能使用生命周期方法。 甚至也有一个名为 setState 方法更新状态。...你可以我们刚刚生成项目中 incrementCounter 方法中看到这个方法。 了解更多查看 StatefulWidget、 State 和 StatelessWidget。...我会将 Flutter 添加到我技术栈中,所以当我遇到 React Native 不能解决问题情况,我会使用 Flutter。

1.3K30

如何在ASP.NET Core中使用SignalR构建与Angular通信实时通信应用程序

第一种方法定义时间间隔(轮询)定期调用API 以更新仪表板上数据。 无论如何,还是有一个问题:如果没有更新数据,我们会因请求而不必要地增加网络流量。...完全不同方法是反转角色:当有新数据可用(推送),后端与客户端联系。...请记住,HTML 5具有标准化WebSocket,这是一个永久双向连接,可以兼容浏览器中使用Javascript接口进行配置。...客户端页面代码中搜索与名称相对应方法,如果找到该名称,则将其调用并传递反序列化数据作为参数。...connect()方法,该方法进行实际连接,并在控制台中记录可能错误。

2.1K20

(自制翻译)如何解决vue中this报错undefined

它们运行方式几乎是一样,除了它们处理变量this方法有所不同。...但是它变得不那么好了当我一个对象里定义方法,比如当我们编写vue组件。...* 2); const reduced = array.reduce((prev, next) => prev + next); 正如你例子中看,大部分情况下我们使用匿名函数也会用到箭头函数。...当我普通函数里使用箭头函数,普通函数会设置this作为我们vue组件,这样箭头函数就能正常使用this了 看下面这个例子: data() { return { match: 'This...首先,作用域出现在变量存在地方。Javascript中,window变量有全局作用域——在任何地方都可以被调用。大多数变量只在被定义函数里、class类中、模块里会生效。

4K40

校招前端二面高频vue面试题

方法进行响应式处理( defineReactive 方法就是 Vue 初始化对象,给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 功能所调用方法...,调用顺序全局前置守卫后面,所以不会被全局守卫覆盖 // ... } } ]})路由组件守卫beforeRouteEnter 进入路由前, 路由独享守卫后调用 不能...$root 访问组件属性或方法作用:访问组件属性或方法注意:是组件,不是父组件。...之所以需要这样是因为vdom是一颗单树形结构,patch方法遍历时候从节点开始遍历,它要求只有一个节点。...获取子组件ref变量和defineExpose暴露即vue2获取子组件ref,直接在父组件中控制子组件方法变量方法组件代码如下(示例): <button @click=

1.4K20

Unity基础系列(四)——构造分形(递归实现细节)

AddComponent方法可以创建特定类型组件,并将其附加到游戏对象,返回对其引用。这就是为什么我们可以立即访问组件值。当然也可以使用中间变量。...比如它孙节点会有一个2深度值,以此类推,直到达到最大深度。 inspector 窗口中添加一个公共maxDepth整数变量并将其设置为4。再添加一个私有深度整数。...然后,只有当我最大深度以下,才创建一个新子级。 ? ? (最大深度) 现在进入播放模式时会如何呢? 只有一个子节点被创造出来了。这是为什么呢?因为我们从来没有给 depth 值,它总是零。...例如,每当我们访问深度,我们也可以通过this.depth来完成。通常只需要传递对对象本身引用时才需要使用此方法,就像对Initialization所做那样。那又是为什么要这样做呢?...我们将使用一个单一二维数组来容纳它们,然后需要材质随机选择一个。这样,当我进入游戏模式,我们分形看起来就会有所不同。如果愿意,可以随意添加第三步。 ? ?

1.8K10

校招前端二面高频vue面试题

方法进行响应式处理( defineReactive 方法就是 Vue 初始化对象,给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 功能所调用方法...,调用顺序全局前置守卫后面,所以不会被全局守卫覆盖 // ... } } ]})路由组件守卫beforeRouteEnter 进入路由前, 路由独享守卫后调用 不能...$root 访问组件属性或方法作用:访问组件属性或方法注意:是组件,不是父组件。...之所以需要这样是因为vdom是一颗单树形结构,patch方法遍历时候从节点开始遍历,它要求只有一个节点。...获取子组件ref变量和defineExpose暴露即vue2获取子组件ref,直接在父组件中控制子组件方法变量方法组件代码如下(示例): <button @click=

1.4K40

Rxjs&Angular-退订可观察对象n种方式

方式一 "常规"取消订阅方式 最简单订阅和取消订阅一个可观察对象方式是 ngOnInit 方法订阅可观察对象(Observable), 然后组件类中创建一个类属性用来保存这个订阅(Subscription...但是当我们有多个订阅对象(Subscription), 针对每一个我们都需要在组件类中创建一个字段保存这个对象引用并在 ngOnDestroy 中调用 unsubscribe来取消订阅....首先, 组件类中使用new Subscription()实例化创建一个字段, 然后调用该实例 Subscription.add 方法, 最后 ngOnDestroy 中取消订阅...., 我们可以看到两个订阅对象: 使用这种方式, 我们可以使用RsJS内建方法轻松取消订阅多个可观察对象而不必组件类创建多个字段保存订阅对象引用...., 这种方式我们有多个订阅对象不必组件类中创建多个字段保存对订阅对象引用.

1.2K00

【Concent杂谈】精确更新策略

,这也是为什么当成员变量是对象,我们需要重赋值对象引用,而不是改原有引用值,以避免检测失效。...当如果用户修改了数据则隐式触发了setter,框架感知到了数据变更,Dep会发布通知,让相对应订阅者触发再次渲染,从而改变视图(即调用了相关组件实例update方法) [ma36wkm409.png...通过源码我们会知道connect通过高阶组件包裹层完成了订阅操作以便监听store数据变化,订阅回调函数计算出当前组件该不该渲染,我们实例化组件其实是包裹后组件,该组件实现了shouldComponentUpdate...[o457g7wcv7.png] 注意所谓元数据,就是上面的代码里register调用传入那些参数,当组件实例化后这些参数就带入到了实例上ctx属性上,此处让我们可以观察一个打印控制台concent...),所以当我们拥有大量消费了store某个模块下同一个key如sourceList(通常是map和list)下不同数据组件,如果调用方传递renderKey就是自己ccUniqueKey,

1.3K62

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

是上一篇讲组件调用组件方法那个emit吗?我们接着往下看。 mitt:事件总线 eventBus,事件总线。mitt是一个事件总线库,基于发布订阅事件不同组件内进行通信。...获取变量 通过globalProperties设置变量每个组件中都能访问到,所以我们就定义一个获取当前组件实例方法。...从上图看,main就一个div来展示页面,当我们切换路由/tab,当前组件默认被销毁,然后新建跳转组件展示。 我修改了控制台页面的值,然后切换到其他tab再切换回来时,修改值就没了。...也就意味着,我之前控制台页面组件切换就被销毁了,切换过来时又重新创建了一个组件。...所以,我们需要一个缓存组件功能,切换tab,页面销毁重建,而是缓存起来直接引用即可。

20600

RxJava && Agera 从源码简要分析基本调用流程(2)

4.其他角色 Subject SubjectRx系列是一个比较特殊角色,它继承了Observable同时也实现了Observer接口,也就是说它既可作为观察者,也可作为被观察者,他一般被用来作为连接多个不同...之后,当我调用subject.onNext(),消息才被发送,ObserveronNext()被触发调用,输出了"Hello World"。...这里我们注意到,当订阅事件发生,我们subject是没有产生数据流,直到它发射了"Hello World",数据流才开始运转,试想我们如果将订阅过程和subject.onNext()调换一下位置,...最终这个配置过程中,我们调用了onDeactivation(),为这个repository明确了最终进入非活跃状态行为,如果不需要其他多余配置的话,我们就可以进入最终compile()方法了...不过Agera本文撰写则是 agera-1.0.0-rc2,未来版本还有很多不确定因素,相比之下Rx系列发展了这么久,框架已经相对成熟。

10.3K10

【设计模式】689- TypeScript 设计模式之观察者模式

4. 缺点 当一个观察目标「有多个直接或间接观察者」,通知所有观察者过程将会花费很多时间; 当观察目标和观察者之间存在「循环依赖」,观察目标会触发它们之间进行循环调用,可能「导致系统崩溃」。...三、使用场景 以下情况下可以使用观察者模式: 一个抽象模型中,一个对象行为「依赖于」另一个对象状态。...Vue.js 数据双向绑定实现原理 Vue.js 中,当我们修改数据状,视图随之更新,这就是 Vue.js 双向数据绑定(也称响应式原理),这是 Vue.js 中最独特特性之一。...2.1 原理介绍 官网中提供这么一张流程图,介绍了 Vue.js 响应式系统整个流程: 图片来自:Vue.js 官网《深入响应式原理》 Vue.js 中,每个组件实例都对应一个 watcher...其定义了一种「对象间一对多依赖关系」,当观察目标发生状态变化,会通知所有观察者对象,使它们自动更新。 实际业务中,如果一个对象行为「依赖于」另一个对象状态。

52741

TypeScript 设计模式之观察者模式

模式组成 观察者模式中,通常包含以下角色: 目标:Subject 观察目标:ConcreteSubject 观察者:Observer 具体观察者:ConcreteObserver 2....4. 缺点 当一个观察目标有多个直接或间接观察者,通知所有观察者过程将会花费很多时间; 当观察目标和观察者之间存在循环依赖,观察目标会触发它们之间进行循环调用,可能导致系统崩溃。...三、使用场景 以下情况下可以使用观察者模式: 一个抽象模型中,一个对象行为依赖于另一个对象状态。...Vue.js 数据双向绑定实现原理 Vue.js 中,当我们修改数据状,视图随之更新,这就是 Vue.js 双向数据绑定(也称响应式原理),这是 Vue.js 中最独特特性之一。...其定义了一种对象间一对多依赖关系,当观察目标发生状态变化,会通知所有观察者对象,使它们自动更新。 实际业务中,如果一个对象行为依赖于另一个对象状态。

1.1K11

【React Conf 2018 回顾】React 今天和明天 II —— React Hooks 提案

demo4 (掌声和欢呼声) 那么我们来比较一下这两种方式。左侧是我们熟悉 class 组件。这里 state 必须是一个对象。嗯,我们绑定一些事件处理函数以便调用。...事件处理函数里面使用了 this.setState 方法当我调用 setState 方法,实际上并没有直接将值设置到 state 里面,state 作为参数合并到 state 对象里。...因为 state 里 name 变量函数里已经可用。它就是一个变量。同样当我们需要设置 state ,我们不需要使用 this.something。...当我们需要获取它,需要调用 this.state.something。右侧使用 hook 例子中,我们使用了两次 hook,声明了两个变量:name 和 surname。...而且每当我调用 setName 或 setSurname ,React 会接到需要重新渲染该组件通知,就和调用 setState 一样。

2.8K30
领券