首页
学习
活动
专区
工具
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.7K10

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

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

3.6K30
  • RxJS & React-Observables 硬核入门指南

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

    6.9K50

    Flutter响应式编程:Streams和BLoC

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

    4.2K90

    Angular进阶教程2-

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

    4.2K30

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

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

    2.3K20

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

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

    1.4K30

    如何在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类中、模块里会生效。

    4.1K40

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

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

    2K10

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

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

    1.4K40

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

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

    1.5K20

    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.4K62

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

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

    10.4K10

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

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

    34700

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

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

    54341

    【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.9K30

    TypeScript 设计模式之观察者模式

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

    1.2K11
    领券