Loading [MathJax]/jax/output/CommonHTML/config.js
社区首页 >问答首页 >带数组/对象问题的Angular2可观测存储服务.组件到组件通信

带数组/对象问题的Angular2可观测存储服务.组件到组件通信
EN

Stack Overflow用户
提问于 2017-01-11 16:41:45
回答 1查看 825关注 0票数 0

第一个问题,让我轻松一点吧!

我希望在Angular2中构建一个共享服务,该服务提供一个可观察的属性,可由应用程序中的组件订阅。

另外,我希望设置它,以便数据是从组件而不是通过HTTP调用提供的。我已经找到了设置示例,其中它使用DB作为CRUD操作的数据源,而不是在组件中创建数组或对象的位置。

一个简单的例子如下:

  1. 服务在负载时创建可观察的属性。
  2. Comp1更新服务上的属性。
  3. Comp2 (订阅服务上的可观测属性)从服务接收更新。
  4. Comp2继续得到更改,因为Comp1继续对可观察的属性进行更改。

有没有人知道一个很好的解释,或者有这个用例的例子?

谢谢!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-01-12 00:52:20

这是非常常见的用例,您可以这样做。

1)在服务构造函数中初始化可观察到的

代码语言:javascript
代码运行次数:0
复制
this.myObservable = new Subject();

根据你想要达到的目标,你可以使用不同的观察仪器。Subject既是可观察的,也是观察者的,它将返回订阅的最新价值。

2)在源组件中推送新值

代码语言:javascript
代码运行次数:0
复制
myService.myObservable.next({...});

您还可以通过服务类中的setter来完成此操作,这样您就可以在将数据推入流之前修改它。

3)在您的消费类中,订阅流

代码语言:javascript
代码运行次数:0
复制
myService.myObservable.subscribe(value => ...);

您可以在任意多个组件中订阅它。当您订阅时,您将立即获得最新的值,然后在更新时获得新的值。

如果希望具有初始值,则在初始化服务中可观察到的值时,可以使用BehaviorSubject而不是Subject

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/41603314

复制
相关文章
聊聊类组件到函数组件的变迁
最近一直在学习 React,在看到 React Hooks 一章时联想到 Compose ,简直有着异曲同工之处,他们都是由 UI 组件、State 状态、Effect 副作用构成,而且,Android 端很多优秀的架构思路都来源于前端,适当性的学习些前端知识,反而更能容易理解当下 Android 原生的架构,这也是我一直推荐大家有时间也学习一下前端的原因,本期主要聊聊 Android 原生与 React 的对比,总结了类组件与函数组件的不同。
codelang
2022/11/30
3.5K1
聊聊类组件到函数组件的变迁
Angular2 组件的使用
3.在 @Component 中 ,设置selector、template 和 styles 等元数据
用户1437675
2018/08/20
1.5K0
Vue组件通信_android组件间通信
传递数据<组件标签名 name=’***’ :传递参数名=’值’/> 这里传递参数名前加” : ” 从而可以动态绑定数据
全栈程序员站长
2022/11/19
1.9K0
Vue组件通信_android组件间通信
Vue基础:组件--组件及组件通信
组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以is特性扩展。
奋飛
2019/08/15
1.8K0
使用angular2 自带的指令,快捷创建服务,组件等!
使用ng 指令创建一个组件! ng g component produce 可以直接创建指令并更新app.module.ts; ng g service shared/login ; 可以直接创建服务
杭州前端工程师
2018/06/14
1.9K0
Vue 父子组件通信 兄弟组件通信 深层组件通信 方式一览
this.$parent   获取父组件实例 可以使用父组件实例的属性 this.$children 获取子组件数组 可以利用下标调用子组件实例的属性
憧憬博客
2020/07/20
1.3K0
react 创建组件以及组件通信
关于React.createClass方法与class App extends Component方法的区别
念念不忘
2019/03/29
9520
vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系,父子关系、兄弟关系和隔代关系,简化点可以分为父子关系和非父子关系,下面就讲讲vue父子组件通信以及非父子组件通信的方法。使用代码格式会比较乱,所以直接使用图片演示。
青年码农
2020/10/13
1.7K0
vue父子组件通信以及非父子组件通信的方法
react的组件通信
本文最后更新于 128 天前,其中的信息可能已经有所发展或是发生改变。 react的组件通信 1、父组件传子组件 import React, {Component} from 'react' class Father extends Component{ render() { return ( <div> <Child msg="我是父组件中的数据:father-data"/> </div>
likepoems
2023/03/04
6670
Vue.js的组件、组件间通信
props定义了这个组件有哪些可配置的属性,props最好用对象的写法,这样可以针对每个属性设置类型、默认值或自定义校验属性的值。
用户3258338
2020/05/22
10.2K0
Vue 组件的通信
组件通信 父->子(在子组件中使用父组件数据) props : 不可修改 单向数据传递 子->父(在父组件中使用子组件数据) 自定义事件! 兄弟组件 组件让我们提高了代码的复用性,接下来考虑如何在不同的组件中进行传值 比如: 父组件有items数组 在子组件中使用父组件中的items数组去渲染列表 父子组件通信 目的: 要在子组件中使用父组件中data中的属性值 关键点:通过Props给子组件传值 步骤: 在子组件中通过props声明自定义属性title 注册局部组件 使用子组件
RiemannHypothesis
2022/11/05
3660
Vue 组件的通信
vue组件详解(三)——组件通信
组件之间通信可以用下图表示: 组件关系可分为父子组件通信、兄弟组件通信、跨级组件通信。 一、自定义事件 当子组件需要向父组件传递数据时,就要用到自定义事件。 子组件用$emit ()来触发事件,父组件
柴小智
2018/04/10
1.2K0
vue组件详解(三)——组件通信
Vue 组件(二):父子组件通信
子组件是不能直接访问父组件中的数据的,但有时候父子组件之间需要进行数据交互,这就涉及到了父子组件通信的问题。简单来说,父组件向子组件通信是通过 props 进行的,而子组件向父组件通信则是通过自定义事件进行的。
Chor
2019/11/07
9290
React - 组件:函数组件
1. 组件名字首字母一定是大写的 2. 返回一个jsx 3. jsx依赖React,所以组件内部需要引入React 4. 组件传参 a. 传递. <Component list={ arrData }><Component> b. 接收. function Component( props ){...} c. 使用. const { list } = props,list就是参数数据 5. 缺点:【无状态组件】只能实现很简单的视图展示功能,没有自己的内容数据、没有状态,没有逻辑处理,【没有this】,【没有生命周期】。 6. 16.7以后版本的react有状态和钩子函数提供使用。不过版本过新不推荐用 内部不用render函数,会自动把return返回结果当做render返回结果【见类组件的必须要求】
xing.org1^
2019/11/26
1.8K0
React - 组件:函数组件
Vue 组件通信
该章节的内容到这里就全部结束了,源码我已经发到了 GitHub Vue-Communication 上了,有需要的同学可自行下载
Nian糕
2020/05/18
4400
Vue 组件通信
Angular 组件通信
上一篇,我们讲了 Angular 结合 NG-ZORRO 快速开发。前端开发,很大程度上是组件化开发,永远离不开组件之间的通信。那么,在 Angular 开发中,其组件之间的通信是怎么样的呢?
Jimmy_is_jimmy
2022/04/15
2K0
React组件通信
react因为组件化,使得组件间通信十分的重要。本文就来简单介绍一些常见的react组件间传递的内容。
xiaofeng123aa
2022/10/18
1.1K0
Vue组件通信之父组件向子组件传递数据
在Vue.js中,组件通信是构建大型应用的重要一环。其中,父组件向子组件传递数据是一种常见的通信方式。本文将深入探讨如何在Vue应用中实现父组件向子组件传递数据,并通过实际例子演示这一过程。
用户10781437
2023/10/10
3330
解密传统组件间通信与React组件间通信
在React中最小的逻辑单元是组件,组件之间如果有耦合关系就会进行通信,本文将会介绍React中的组件通信的不同方式
前端迷
2019/12/05
1.5K0
React组件设计模式-纯组件,函数组件,高阶组件
如果你想写的组件只包含一个 render 方法,并且不包含 state,那么使用函数组件就会更简单。我们不需要定义一个继承于 React.Component 的类,我们可以定义一个函数,这个函数接收 props 作为参数,然后返回需要渲染的元素。
xiaofeng123aa
2022/10/18
2.2K0

相似问题

Angular2组件到组件通信

21

可观测组件间的angular2通信

12

Angular2同级组件通信,组件不订阅服务

13

Angular2 :如何从父组件到子组件进行通信?

22

使用服务/广播的组件通信: Angular2

20
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档