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

如何将数据从订阅存储/设置到外部变量,并再次从Angular 7中的其他类读取数据

在Angular 7中,可以通过以下步骤将数据从订阅存储/设置到外部变量,并再次从其他类中读取数据:

  1. 创建一个服务(Service)来处理数据的订阅和存储。可以使用Angular的@Injectable装饰器将该服务标记为可注入的。
代码语言:txt
复制
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private dataSubject: BehaviorSubject<any> = new BehaviorSubject<any>(null);
  public data$ = this.dataSubject.asObservable();

  setData(data: any) {
    this.dataSubject.next(data);
  }
}
  1. 在需要设置数据的组件中,注入DataService,并调用setData方法来设置数据。
代码语言:txt
复制
import { Component } from '@angular/core';
import { DataService } from 'path-to-data-service';

@Component({
  selector: 'app-source-component',
  template: `
    <button (click)="setData()">Set Data</button>
  `
})
export class SourceComponent {
  constructor(private dataService: DataService) {}

  setData() {
    const data = 'Hello, World!';
    this.dataService.setData(data);
  }
}
  1. 在需要读取数据的组件中,同样注入DataService,并订阅data$属性来获取数据。
代码语言:txt
复制
import { Component, OnInit } from '@angular/core';
import { DataService } from 'path-to-data-service';

@Component({
  selector: 'app-destination-component',
  template: `
    <p>Data: {{ data }}</p>
  `
})
export class DestinationComponent implements OnInit {
  data: any;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.data$.subscribe(data => {
      this.data = data;
    });
  }
}

通过以上步骤,你可以将数据从订阅存储/设置到外部变量,并在Angular 7中的其他类中读取数据。这种方法适用于在不同组件之间共享数据,并实时更新数据的场景。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云对象存储(COS)、腾讯云数据库(TencentDB)等。你可以访问腾讯云官方网站(https://cloud.tencent.com/)了解更多关于这些产品的详细信息和使用指南。

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

相关·内容

Angular12个经典问题,看看你能答对几个?(文末附带Angular测试)

ngOnDestroy:在Angular销毁指令/组件之前清除。取消订阅可观察对象脱离事件处理程序,以避免内存泄漏。...保护运行后,它将解析路由数据通过将所需组件实例化 中来激活路由器状态。...这通常用在setter中,当值被更改完成时。 可以通过模块任何一个组件,使用订阅方法来实现事件发射订阅。...RouterModule.forChild会再次采用路由数组为子模块组件加载配置路由器。...其中一些是: 避免为你组件使用/注入动态HTML内容。 如果使用外部HTML,也就是来自数据库或应用程序之外地方,那么就需要清理它。 不要将外部网址放在应用程序中,除非它是受信任

17.3K80

浅谈Angular

ng-show本质上设置元素display值为none,只是设置样式,DOM结构还在,而*ngIf是真正意义上DOM结构中移除结构型指令 *ngIf--控制元素显隐性 ?...ng-show本质上设置元素display值为none,只是设置样式,DOM结构还在,而*ngIf是真正意义上DOM结构中移除 *ngFor--动态创建DOM结构 ngSwitch--通过匹配case...来控制元素显隐 在自定义指令里获取指令添加到其上面的元素,需要依赖注入ElementRef服务 如果自定义指令想要接收外部传入值,需要使用@Input装饰器\....: 使用RxJS解决,RxJS提供响应式开发(基于观察者模式),我们可以订阅某个值,一旦该值被订阅,如果其存储数据发生变化,订阅者就会收到通知,进而做出对应处理 注意点: AngularJS...里,并不是所有的值都可以被订阅,只有Observable或者Observable子类创建出对象可以被订阅 subscribe是Observable一个函数。

4.4K10
  • AngularDart 4.0 高级-生命周期钩子 顶

    ngOnInit 在Angular首次显示数据绑定属性设置指令/组件输入属性后,初始化指令/组件。 在第一次ngOnChanges之后调用一次。...ngOnDestroy 在Angular摧毁指令/组件之前进行清理。 取消订阅observables分离事件处理程序以避免内存泄漏。 在Angular摧毁指令/组件之前调用。...AfterContent 演示如何将外部内容投影组件中,以及如何区分组件视图中投影内容和子组件。 演示ngAfterContentInit和ngAfterContentChecked挂钩。...构造函数不应仅仅将初始局部变量设置为简单值。 ngOnInit是组件获取其初始数据好地方。 教程和HTTP章节显示了如何。 还要记住,指令数据绑定输入属性在构建之后才会设置。...大部分初始检查都是由Angular在页面其他地方首次渲染(与数据无关)而触发。 仅仅通过鼠标移动到另一个输入框就会触发一个呼叫。 相对较少调用显示相关数据实际变化。

    6.2K10

    单向双向数据绑定0.前言1.单向数据(代表:react)2.观察者模式3.双绑中间枢纽——Object.defineproperty(代表:vue)4. 脏值检测(代表:angular1)前面说

    而单向数据流就不同了,我们只有ui行为改变,data就改变马上反馈v层,而我们自己在控制台改变data这个值,v层居然不变(model是已经变了并没有反应),只能等到下一次ui行为改变,带上这个data...而我们前面的vue,当我们在控制台改了数据,就可以马上反映v层。angular并没有这个操作,也没有意义。...在angular1中,私有变量以$$开头,$$watch是一个存放很多个绑定对象数组,用$watch方法来添加,每一个被绑定对象属性是:变量名、变量旧值、一个函数(用来返回变量新值)、检测变化回调函数...然后和上一次值进行比较,如果不同,那就调用 getListener,同时把新值和旧值一传递进去。 最终,我们把last属性设置为新返回值,也就是最新值。...比如我们假设有一个这样生命周期:1.data里面读取数据2.ui行为(如果没有ui行为就停在这里等他有了为止)3.触发data更新4.再回到步骤1 改了一个数,v层不能反回头来找他来更新v层视图(步骤

    1.6K40

    Angular进阶教程2-

    依赖注入(DI) 依赖项( 服务/对象 )注入是一种设计模式,在这种设计模式中,外部源请求依赖项\color{#0abb3c}{请求依赖项}请求依赖项而不是创建它们。...,该注入器主要负责创建服务实例,并把他注入中, 元数据providedIn: 'root' 表示 HeroService在整个应用程序中都是可见。...Angular在启动程序时会启动一个根模块,加载它所依赖其他模块,此时会生成一个全局根注入器,由该注入器创建依赖注入对象在整个应用程序级别可见,共享一个实例。...服务器请求数据 HttpClient.get() // 在服务中去封装和服务端通讯方法 public getHttpResult(code: string, name: string...SubjectAngular常见作用: 可以在Angular通过service来实现不同组件,或者不同模块之间传值 // 定义公共用于数据存储service,文件名是(eg:xampleStore.service.ts

    4.1K30

    AngularDart4.0 指南- 表单 顶

    表单是商业应用程序主流。您可以使用表单登录,提交帮助请求,下订单,预订航班,安排会议,执行无数其他数据录入任务。...创建一个基本表单 一个Angular表单有两个部分:一个基于HTML模板和一个组件,以编程方式处理数据和用户交互。 课程开始,因为它简要地说明了英雄编辑可以做什么。...Angular可不使用Bootstrap或任何外部样式。 Angular应用程序可以使用任何CSS库或不使用。...指令exportAs属性告诉Angular如何将引用变量链接到指令。 您将name设置为“ngForm”,因为ngModel指令exportAs属性是“ngForm”。...作为一种视觉效果,您可以隐藏数据输入区域显示其他内容。 将表单封装在中,并将其hidden属性绑定HeroFormComponent.submitted属性。

    17.5K30

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

    我们很快会讨论输入和组件通信,但现在,我们只需要记住,最好使用常量构造函数,比如实际上被硬编码组件ngOnInit中东西,以及依赖于外部所有东西数据。...我们InputAngular代码导入,并将其用作类型为Array任何类型对象变量装饰器。...看起来,要在组件外部传递数据,我们有输出,而且我们使用输入方式 - 我们Angular代码中导入它,使用装饰器来定义它: import {Component, EventEmitter, OnInit...我们可以使用诸如ngrx-store-localstorage之类东西来存储我们数据浏览器localStore,但是如何使用API​​呢?...这就是你如何将效果集成服务器加载数据过程。但是我们仍然需要将其发回到我们的卡片创建中。让我们来做这件事吧。

    42.6K10

    单向双向数据绑定

    而单向数据流就不同了,我们只有ui行为改变,data就改变马上反馈v层,而我们自己在控制台改变data这个值,v层居然不变(model是已经变了并没有反应),只能等到下一次ui行为改变,带上这个data...其实,每一种都有每一种适用场景,还是那句话,脱离实际场景谈性能,就是扯淡 1.单向数据(代表:react) 一般过程:ui行为→触发action→改变数据state→mumtation再次渲染ui界面...而我们前面的vue,当我们在控制台改了数据,就可以马上反映v层。angular并没有这个操作,也没有意义。...然后和上一次值进行比较,如果不同,那就调用 getListener,同时把新值和旧值一传递进去。 最终,我们把last属性设置为新返回值,也就是最新值。...比如我们假设有一个这样生命周期:1.data里面读取数据2.ui行为(如果没有ui行为就停在这里等他有了为止)3.触发data更新4.再回到步骤1 改了一个数,v层不能反回头来找他来更新v层视图(步骤

    3.6K20

    angular基础面试题_java web面试题

    angular 生命周期顺序 ngOnChanges: Angular 设置或重新设置数据绑定输入属性时响应。...在 ngOnInit() 之前以及所绑定一个或多个输入属性值发生变化时都会调用 ngOnInit: 在 Angular 第一次显示数据绑定和设置指令/组件输入属性之后,初始化指令/组件。...ngOnDestroy:当 Angular 每次销毁指令/组件之前调用清扫....灵活路由,具备延迟加载功能 更容易学习 angular1是全局监听,变量越多性能越差,angular2采用模块化监听,提升了性能 在Angular 2应用中,我们应该注意哪些安全威胁?...如果使用外部HTML,也就是来自数据库或应用程序之外地方,那么就需要清理它。 不要将外部网址放在应用程序中,除非它是受信任。避免网址重定向,除非它是可信。 考虑使用AOT编译或离线编译。

    13K50

    angular面试题及答案_angular面试

    Angular中有三种方法可以做到这一点: Emulated : 样式其他HTML传播到组件。 Native : 来自其他HTML样式不会传播到组件。...)作为参数 — 返回 unsubscribe 函数,用于取消订阅 – 作用: — 作为生产者和观察者之间桥梁,返回一种方法来解除生产者和观察者之间关系...ngOnInit : 在angular 第一次显示数据绑定和设置指令、组件输入属性之后,初始化指令、组件 所以angular生命周期看,constructor是执行在先 所以既然ngOnchanges...最小化组件代码 不易于单元测试 Reactive Forms (响应式表单) 特点 比较灵活 适用于复杂场景 简化了HTML模板代码,把验证逻辑抽离组件中...|Function|string 类型选择器 不同点 ContentChild 用来通过 Content Projection 方式 (ng-content) 设置视图中获取匹配元素

    11.1K120

    VUE2.0如何追踪数据变化?

    Vue采用更加优雅方式来解决:数据劫持+发布订阅者模式。 1. 数据劫持 Vue通过Object.defineProperty()设置对象存储器属性,即set和get。...这样可以拦截数据,做一些额外事情。比如设置/更新时,添加对该属性感兴趣订阅者;读取属性时,通知关系该属性订阅者更新数据。 2....),它劫持属性变化,负责 添加订阅者(watcher)订阅者容器(Dependency) 数据改变时,通知订阅者容器发布更新通知。...数据对象每个属性,都包含一个Dep实例对象,用于存储关心该属性变化watchers。 在model--->UI渲染过程中,通过数据属性get函数,可以添加相对应watcherDep对象中。...()存储性属性set和get实现了数据劫持,采用发布-订阅者设计模式,利用一系列watcher对象监听数据变化通知DOM更新。

    1.2K20

    Angular 入坑挖坑 - 组件食用指南

    ,将数据源与视图进行绑定,从而实现源数据与用户呈现一致性 数据视图:插值、组件中属性、dom 元素 property 3、css 样式、css 视图数据源:事件 视图与数据源之间双向绑定...因此,这里应该使用模板引用变量方式获取数据信息。 模板引用变量是对模板中 DOM 元素引用,提供了模块中直接访问元素能力。...dom 元素外观或行为 NgClass:用来设置元素多个 css 类属性,如果只设置一个 css ,应该使用模板绑定语法中 class 绑定 <p [ngClass]="inlineStyle...text-red、bg-blue 都是 css <em>类</em>名,如果想要在指定<em>的</em>元素上添加该类,则 css <em>类</em>名对应<em>的</em>值为 true,反之则为 false NgStyle:用来<em>设置</em>元素<em>的</em>多个内联样式,如果只<em>设置</em>一个内联样式...4.4.4、非父子组件之间<em>的</em>通信 不管组件之间是否具有关联关系,都可以通过共享一个服务<em>的</em>方式来进行<em>数据</em>交互,也可以将需要进行共享<em>的</em><em>数据</em><em>存储</em><em>到</em>一些<em>存储</em>介质中,通过直接<em>读取</em>这个<em>存储</em>介质中<em>的</em><em>数据</em>进行通信 创建一个服务

    15.8K30

    HarmonyOS学习路之开发篇—数据管理(轻量级数据存储

    应用也可以将缓存数据再次写回文本文件中进行持久化存储,由于文件读写将产生不可避免系统资源开销,建议应用减少对持久化文件读写频率。 基本概念 Key-Value数据结构 一种键值结构数据类型。...图1 轻量级数据存储运作机制 约束与限制 因Preferences实例会加载到内存中,建议存储数据不超过一万条,及时清理不再使用实例,以便减少非内存开销。...数据持久化 通过执行flush方法,应用可以将缓存数据再次写回文本文件中进行持久化存储。...使用deletePreferences方法内存中移除指定文件对应Preferences单实例,删除指定文件及其备份文件、损坏文件。...源路径移动文件目标路径。移动文件时,应用不允许再操作该文件数据,否则会出现数据一致性问题。

    31220

    2020最新前端面试题_2020年前端面试题

    Function、RegExp 2、js变量和函数声明提升 在js中变量和函数声明会提升到最顶部执行 函数提升高于变量提升 函数内部如果用 var 声明了相同名称外部变量,函数将不再向上寻找。...3、闭包 闭包就是能够读取其他函数内部变量函数 闭包基本上就是一个函数内部返回一个函数 好处 可以读取函数内部变量变量始终保持在内存中 可以封装对象私有属性和私有方法 坏处 比较耗费内存、使用不当会造成内存溢出问题...它机制就是跟踪某一个值得引用次数,当声明一个变量并且将一个引用类型 赋值给变量得时候引用次数加1,当这个变量指向其他一个时引用次数减1, 当为0时出发回收机制进行回收。...因此所有组件状态都存储在store 中, 并且它们 store 本身接收更新。 单一状态树可以更容易地跟踪随时间变化, 调试或检查程序。 21、列出 Redux 组件?...因此,Redux 非常简单且是可预测。 我们可以将中间件传递 store 来处理数据记录改变存储状态各种操作。

    6.7K10

    钱包客户端

    在其内部它维持一个Wallet列表,通过每个Wallet实现持有一组Account账户对象,通过一个event.Feed成员变量来管理所有向它订阅Wallet更新事件需求。...Unlocked{}:公钥密钥数据Key{}封装,其内部成员除了Key{}之外,还提供了一个chan类型变量abort,它会在KeyStore对于公钥密钥信息管理机制中发挥作用。...Key{}:存放数字签名公钥密钥数据,其内部显式存储了一个ecdsa.PrivateKey{}类型成员变量,前文介绍过,Golang原生代码包中ecdsa.PrivateKey{}中含有PublicKey...keystore机制以本地文件形式提供对账户信息和数字签名公钥私钥存储读取,从而以软件方式实现了accounts.功能。...ProtocolManager成员变量中,Fetcher用以接收其他个体发来宣布挖掘出新区块消息决定向对方获取需要部分,Downloader负责整个区块链结构同步(下载)。

    1.6K30

    【第3版emWin教程】第22章 emWin6.xGIF图片显示

    mod=viewthread&tid=98429 第22章 emWin6.xGIF图片显示 本期主要讲emWin支持GIF图片显示,官方支持主要有两种显示方法,一种方法是直接外部存储读取数据显示...另一种是外部存储读取整个图片RAM(比如内部SRAM,外部SRAM或者外部SDRAM),然后再显示图片,这种方法显示速度要稍快些。...另一是不以Ex结尾函数,这种函数直接指定地址读取数据进行显示(注意,这里地址需是总线式地址,比如外部SDRAM,外部SRAM,内部Flash和内部SRAM都可以),显示速度相对稍快。...Index张(注意,这里Index就是指参数Index所指定子图片序号,这个参数是0开始计数)GIF子图片数据,从而实现边读取图片数据边显示功能,将图片显示用户设置位置(x0, y0)...其中显示多少时间参数比较有用,专门用于设置时间各个子图片之间时间间隔。返回结果是存储第三个参数所指向结构体变量地址。

    85140

    AngularDart 4.0 高级-结构指令 顶

    当条件为false时,NgIfDOM中删除它宿主元素,将它从DOM事件(它所依附)中分离出来,将组件Angular变化检测中分离出来销毁它。 组件和DOM节点可以被垃圾收集释放内存。...积极方面来说,再次显示元素很快。 该组件以前状态被保存准备显示。 该组件不会重新初始化 - 这种操作可能很昂贵。 所以隐藏和展示有时候是正确。...*ngFor内部详解 Angular以类似的方式将*ngFor转换为星号(*)语法通过模板属性模板元素。...变量作用域限于重复模板单个实例。 您可以在其他结构指令定义中再次使用相同变量名称。 您通过在#(#var)前缀加上变量名称来声明一个模板引用变量。 引用变量是指其附加元素,组件或指令。...您将通过TemplateRef获取内容通过ViewContainerRef访问视图容器。 你在指令构造函数中注入这两个作为私有变量

    16.1K20

    【17】进大厂必须掌握面试题-50个Angular面试

    它提供了一个轻松开发基于Web应用程序平台,使前端开发人员能够管理跨平台应用程序。它集成了强大功能,例如声明性模板,端端工具,依赖项注入以及各种其他使开发路径更流畅最佳实践。...在这里,每个视图都有自己 scope,因此由其视图控制器设置变量将对其他控制器隐藏。...Angular组件具有离散生命周期,其中包含出生到死亡过渡不同阶段。为了更好地控制这些阶段,我们可以使用以下方法将其连接: 构造函数: 通过在上调用new创建组件或指令时将调用它。...您可以使用此钩子来取消订阅可观察对象分离事件处理程序,以避免发生任何类型内存泄漏。 31.通过对Angular进行脏检查,您了解什么? 在Angular中,摘要过程称为脏检查。...被监视变量处于单个循环(摘要循环)中,任何变量任何值更改都会在DOM中重新分配其他被监视变量值 32.区分DOM和BOM。

    41.4K51

    浅谈Hooks&&生命周期(2019-03-12)

    Vue-lifecycle Angular生命周期: Hook Purpose and Timing ngOnChanges() Angular(重新)设置数据绑定输入属性时响应。...ngOnInit()在一个或多个数据绑定输入属性发生更改 之前和之后调用。 ngOnInit() 在Angular首次显示数据绑定属性设置指令/组件输入属性后初始化指令/组件。...[ngAfterContentInit()] 在Angular外部内容投影组件视图/指令所在视图后进行响应。在第一次之后 调用一次ngDoCheck()。...取消订阅Observable分离事件处理程序以避免内存泄漏。在 Angular破坏指令/组件之前 调用。 React生命周期(16.0之前): ? React-Lifecycle1 ?...毕竟class组件就是原生class写法。 其实React内置了一个Component,生命周期钩子都是它这里来,麻烦地方就是每次都要继承。

    3.2K40

    vue响应式原理(数据双向绑定原理)

    ,难以避免) 所以Angular是带有比较强排它性,如果你应用不是从头开始,而是要不断考虑是否跟其他东西集成,这些主张会带来一些困扰。...中间层,控制层(Controller):处理业务逻辑,负责根据用户“视图层”输入指令,选取“数据层”数据,然后对其进行相应操作,产生最终结果 各部分通信方式如下: - View传送指令...当与现代化工具链以及各种支持库结合使用时,vue也完全能够为复杂单页应用提供驱动 数据驱动:Vue.js 一个核心思想是数据驱动。...,同时会通知被关联Watcher,然后Watcher就会再次对a.b求值,计算对比新旧值,当值改变了,Watcher就会通知指令,调用指令update()方法,由于指令是对DOM封装,所以就会调用...然后,需要compile解析模板指令,将模板中变量替换成数据,接着初始化渲染页面视图,并将每个指令对应节点绑定更新函数,添加监听数据订阅者。

    2.7K40
    领券