首页
学习
活动
专区
工具
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/)了解更多关于这些产品的详细信息和使用指南。

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

相关·内容

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

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

17.4K80

浅谈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...Subject的在Angular中的常见的作用: 可以在Angular通过service来实现不同组件,或者不同模块之间的传值 // 定义公共的用于数据存储的service,文件名是(eg:xampleStore.service.ts

    4.2K30

    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中的东西,以及依赖于外部的所有东西数据。...我们Input从Angular代码导入,并将其用作类型为Array的任何类型对象的类级变量卡的装饰器。...看起来,要在组件外部传递数据,我们有输出,而且我们使用输入的方式 - 我们从Angular代码中导入它,并使用装饰器来定义它: import {Component, EventEmitter, OnInit...我们可以使用诸如ngrx-store-localstorage之类的东西来存储我们的数据到浏览器的localStore,但是如何使用API​​呢?...这就是你如何将效果集成到从服务器加载数据的过程。但是我们仍然需要将其发回到我们的卡片创建中。让我们来做这件事吧。

    42.7K10

    从单向到双向数据绑定

    而单向数据流就不同了,我们只有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面试题及答案_angular面试

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

    11.3K120

    angular基础面试题_java web面试题

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

    13K50

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

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

    1.2K20

    《编程千问》第五问:一个程序从点击到启动发生了什么?

    文件系统访问: 文件系统(如 NTFS、ext4)查找目录项: 读取磁盘中存储的文件目录结构,找到 exe 文件的元数据(文件的起始地址、大小等)。...打开的文件句柄列表等。 3.2 初始化地址空间 操作系统为新进程分配一个独立的虚拟地址空间。 虚拟地址空间划分为以下部分: 代码段:存储程序的机器指令。 数据段:存储全局变量和静态变量。...4.2 硬盘到内存的数据传输 数据加载涉及以下硬件: 磁盘调度: 操作系统调用磁盘驱动,通过 SATA、NVMe 或其他接口读取文件。...如果数据不在内存,触发页面调度,从磁盘中加载页面到内存。 缓存优化: 经常访问的数据会保存在 CPU 的高速缓存中(L1/L2/L3)。...更多系列内容可以点击专栏目录订阅,感谢支持,再次祝大家祉猷并茂,顺遂无虞! 若将文章用作它处,请一定注明出处,商用请私信联系我!

    14710

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

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

    15.8K30

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

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

    6.7K10

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

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

    34220

    AngularDart 4.0 高级-结构指令 顶

    当条件为false时,NgIf从DOM中删除它的宿主元素,将它从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.5K51

    从钱包到客户端

    在其内部它维持一个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.x的GIF图片显示

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

    86640
    领券