Angular ngrx管理父级和子级之间的观察值和订阅
Angular ngrx是一个用于管理应用状态的库，它基于Redux模式。它提供了一种可预测的状态管理方式，使得应用的状态变化可追踪、可调试，并且能够在不同组件之间共享状态。
在Angular应用中，父级和子级之间的观察值和订阅可以通过ngrx来管理。ngrx提供了一种机制，可以在父级组件中定义一个状态，并将其传递给子级组件。子级组件可以通过订阅这个状态来获取最新的值，并对其进行相应的处理。
下面是一种常见的实现方式：
- 在父级组件中定义一个状态对象，可以使用ngrx提供的createReducer函数来创建一个reducer函数，用于处理状态的变化。这个状态对象可以包含需要共享的数据。
- 在父级组件的模板中，使用ngrx提供的store指令将状态对象传递给子级组件。可以使用async管道来订阅状态的变化，并将最新的值传递给子级组件。
- 在子级组件中，可以使用ngrx提供的select函数来选择需要的状态。通过订阅这个选择器，可以获取最新的状态值，并进行相应的处理。
通过使用ngrx管理父级和子级之间的观察值和订阅，可以实现以下优势：
- 状态的可预测性：通过统一管理状态，可以更好地追踪状态的变化，使得应用的行为更加可预测。
- 组件之间的解耦：通过将状态提升到父级组件，并通过订阅的方式传递给子级组件，可以实现组件之间的解耦，使得组件的复用性更高。
- 状态的共享和同步：通过共享状态，可以实现不同组件之间的状态同步，使得应用的行为更加一致。
- 调试和测试的便利性：通过使用ngrx，可以更方便地进行状态的调试和测试，提高开发效率。
在腾讯云中，可以使用腾讯云的云原生产品来支持Angular ngrx的应用部署和管理。例如，可以使用腾讯云容器服务（Tencent Kubernetes Engine，TKE）来部署和管理应用的容器，使用腾讯云云数据库（TencentDB）来存储应用的数据，使用腾讯云负载均衡（Tencent Cloud Load Balancer）来实现应用的负载均衡等。
更多关于腾讯云相关产品和产品介绍的信息，可以参考腾讯云官方网站：https://cloud.tencent.com/
相关·内容
我的store State有一段名为selected variables的数据： ? 如果我只有一个组件，我会订阅一个可观察对象，并像下面这样使用内容： ? 我设计了一个父组件，它包含三个标签和三个子组件，以使我的html和typescript代码更清晰： ? 任何子组件以及父组件都可以更改状态的selectedVariable部分。是否有必要选择并订
浏览 39提问于2021-09-07得票数 1
回答已采纳
在我读过的一些关于Angular observables的教程和文档中，我看到了很多关于取消订阅订阅会导致内存泄漏的警告(除非在组件的模板中使用异步管道)。我在我的应用程序中有一些支持类，我在其中创建自定义观察点，但我想知道，如果观察点和所有订阅者都超出范围，取消订阅它们是否重要。例如，我有一个父类，它包含数组中的子</
浏览 40提问于2020-04-14得票数 0
回答已采纳
我使用Angular 10，我有一个ParentComponent和一个ChildComponent。ChildComponent具有指向父级成员的@Input。由于承诺，需要一段时间才能生成父级的成员。稍后，我使用this.cd.detectChanges()通知孩子重绘。
现在如何更新子组件的某些成员？这些更改是否有观察者或订阅者模式？正确的方法是什么？
浏览 7提问于2020-07-31得票数 0
回答已采纳
1回答
在任何地方都有这样的说法:您可以通过@input或服务将数据从父母传递给孩子。我们有一个始终使用服务的策略，但在这种特殊情况下，我只知道如何使用@Input来实现它。/app-item></ul>@Input() item: Item = {price: 0; size: 0; color: 'none'};
如何更改子数据，以使数据来自服务？我知道如何做它'onCli
浏览 0提问于2019-08-29得票数 0
回答已采纳
我最近开始为一个新的项目使用angular 2，对于下面的项目，我对什么是最好的方法感到困惑。我有一个父组件(根)，它有3个子组件，A(表格格式的搜索结果项列表)，B( google地图)和C(具有多个输入/选择下拉列表的表单)。就搜索条件参数而言，组件C(细化形式)应该是主驱动程序，该参数由位于我已注入到根父组件中的服务中的API端点使用。返回的对象(当前是http调用
浏览 0提问于2016-12-02得票数 4
使用Angular 7， 我有一个组件，它有一个输入属性，它是一个对象，它询问一些信息。ngInit(){ .... }} 当我想要传递的对象是父组件的一些属性时，我只需要在父组件上提供一个属性名称，一切都是好的。但是，如果我想传入父组件实例本身，而不是它的一个属性，该怎么办？如何做到这一点？ 在某
浏览 28提问于2019-03-14得票数 4
回答已采纳
4回答
尝试将响应数据从父组件传递到子组件。我用过输入装饰器。但是，这是行不通的。以前的值只显示出来。因此，我们如何能够显示更新的数组响应数据。如果有人知道，请帮忙找出解决办法。
浏览 14提问于2022-07-12得票数 1
1回答
单击父UI中的“重置”按钮时，要重置子用户界面的属性。这是第一次起作用。也就是说，当我第二次点击父母的重置按钮时，不会调用ngOnChanges方法。
下面的选项对我来说很好。也就是说，在子节点中定义双向绑定，并通过this.resetChange.emit( false )将状态传递回父级；因此，当父级的resetTriggered设置为false时，立即调用子级的</e
浏览 1提问于2018-07-14得票数 0
我使用角9，我有父和子组件和服务，存储BehaviorSubject。所有组件都有OnPush策略。
使用此步骤，父级将不会在子级更改可观察到的值后立即作出反应。这是可复制的。例如，
浏览 2提问于2020-05-28得票数 1
1回答
我使用烧瓶管理与烧瓶-sqlalchemy作为一个简单的管理界面，以创建和编辑项目在我们的数据库/烧瓶应用程序。
为了节省时间，我想要一个单独的表单来创建一个新的父级
浏览 6提问于2020-12-18得票数 1
4回答
我正在努力变得更好的角度，我想知道最好的做法之间的儿童-家长沟通。我现在想使用的应用程序是角度6，我知道我可以使用@ViewChild、@Output或创建服务在子父组件之间进行通信。还有其他的沟通方式吗？如果不是，那三个中哪一个更好，为什么？下面是一个简单的例子：<button (click)="onLinkedClicked();">Click me
浏览 0提问于2018-08-09得票数 5
回答已采纳
在阅读angular.component风格的单向绑定时，我遇到了许多关于<和=生成的观察器较少的说法(=将有额外的观察器来将值更改从子级传播到父级)。然而，我刚刚创建了一个虚拟组件，通过=和<将对象传递给它，观察器的数量是相同的。
所以严格地说，性能：<和=之间有什么不同吗
浏览 1提问于2017-04-06得票数 7
5回答
我有一个关于用角度传递数据的问题。child-summary> <content></content>因此，在<summary />中，我有一个select，它向<child-summary />和<content />发送值。因此，我尝试使用@Input、@Output和@EventEmitter指令，但我看不到如何将
浏览 3提问于2017-06-07得票数 47
回答已采纳
我正在开发一个基于MVVM模式的UWP应用程序。子ViewModel包含一些信息，特别是"NumberOfDays“和"AmountPerDay”
父ViewModel包含自己的属性，特别是"DiscountAmount“和"TravellingExpenseAmount”。我还创建了一个方
浏览 18提问于2020-05-26得票数 0
我有这样的html结构：现在，在comp1中，我有一些元素，如果这种情况发生了变化，那么我必须在comp2中反映值，但是它们之间没有联系。/call this function on comp1 sort function call so it will update value of comp2根据Rahul和Sajit的回答，我尝试在EventEmitter中使用并将我
浏览 5提问于2017-08-16得票数 1
回答已采纳
2回答
#2这更接近事实，但我如何将这些数据传递给路由器出口？<router-outlet [account]="account"></router-outlet>使用NgRx。也许是最好的解决办法。问题是，对于其他操作，我不需要NgRx (在我的例子中，它造成的问题多于解决的
浏览 0提问于2019-07-19得票数 1
回答已采纳
我有两个组件，它们不是子父组件，只是独立组件.我想将数据从Component1传递到Component2。有可能吗？我怎样才能实现这一点呢？你能给我举个例子或者链接到一篇文章吗？我发现了很多文章，但它们都是关于父-子组件的。
浏览 3提问于2017-08-13得票数 3
1回答
这是因为多个控件必须输入顶级(父级) FormControl，父级FormControl的值必须经过筛选/操作才能符合所需的格式。一个很好的例子是分拆的电话输入，其中有一个国家代码下拉、电话号码输入和扩展输入，它们都是相互分离的，但都在一个FormGroup中。当这些输入值发生变化时，父级FormControl值也必须
浏览 0提问于2019-01-03得票数 1
我是rxjs的新手，所以我想问一个关于Angular 2、Observables和BehaviorSubject/Subject的问题。this.menuService.toggleMenu()，这会更改BehaviorSubject的值。completed')} }
另一个组件是OnInit() subscribes to the getMenuState()，它是一个Observable，但它只在OnInit()上获取的值
浏览 0提问于2017-05-31得票数 0
我有一个由父组件控制的动态表单，其中包含一个使用ngFor呈现的子DTO数组，这些子组件被传递给DTO并使用自己的模板。类似于：<div class="row parameter-list" *ngFor='let parameter of parameters'> (o
浏览 1提问于2018-08-02得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
