Angular:应用程序组件未检测子组件的更改
Angular是一种流行的前端开发框架，用于构建Web应用程序。它采用了组件化的开发模式，将应用程序划分为多个可重用的组件，每个组件负责管理自己的视图和逻辑。
在Angular中，应用程序组件可以包含子组件。当父组件的状态发生变化时，Angular会自动检测并更新父组件的视图。然而，有时候Angular可能无法检测到子组件的更改，这可能导致视图不更新或出现错误。
这个问题通常是由于Angular的变更检测机制引起的。Angular使用了一种称为"脏检查"的机制来检测组件的变化。当组件的状态发生变化时，Angular会遍历整个组件树，检查每个组件的状态是否发生了变化。然而，由于性能的考虑，Angular并不会检查所有的子组件，而是只检查一部分组件。
解决这个问题的方法有几种。首先，可以使用Angular提供的ChangeDetectionStrategy来改变变更检测的策略。通过设置OnPush策略，可以告诉Angular只在输入属性发生变化时才检测组件的变化，从而提高性能。
另外，可以使用Angular提供的ChangeDetectorRef服务来手动触发变更检测。通过调用detectChanges方法，可以强制Angular检查组件的变化，并更新视图。
此外，还可以使用一些调试工具来帮助定位和解决这个问题。例如，可以使用Angular DevTools来查看组件树和状态的变化，以及检查变更检测的性能。
总结起来，Angular是一个强大的前端开发框架，但在处理应用程序组件未检测子组件的更改时可能会遇到问题。通过了解Angular的变更检测机制，并采取相应的解决方法，可以解决这个问题并提高应用程序的性能和稳定性。
推荐的腾讯云相关产品：腾讯云云开发（https://cloud.tencent.com/product/tcb）是一款支持前后端一体化开发的云原生全托管后端云服务，提供了丰富的开发工具和服务，可帮助开发者快速构建和部署应用程序。
相关·内容
2回答
角内插值不更新订阅
angular、ngrx、angular-changedetection
角6.0.1
ngRx 6.0.1
在我的视图中设置了一个内插值：
{{firstName}}
当绑定到的字段的值发生变化时，它不会进行更新。不过，值正在发生变化--如果我将其登录到订阅内部的控制台，就会看到更新的值。它只是没有在UI中更新。
以下是相关代码：
从我的组件中订阅：
private subscribeToCurrentPerson(): void {
this.tState$ = this.store
.pipe(select(selectors.getCurrentPerson), takeWhile(() => this.compon
浏览 1提问于2018-08-05得票数 2
回答已采纳
1回答
角慢视性能
javascript、angular、frontend
我正在经历一个缓慢的观点问题，并希望帮助或提示如何绕过这个问题。我的问题是视图处理，而不是请求。
情况如下：
我开始意识到，在浏览页面的过程中，速度会变慢，甚至开始锁定页面滚动。我做了以下测试:我有一个仪表板页面，另一个有一个项目列表。从逻辑上讲，进入网站我被导向仪表板，此时，当打开列表页面时，它是缓慢的。如果我在列表页面中按F5，它就会变得正常，滚动变得平滑，但是如果我去另一条路径，它就会开始崩溃，有时甚至在其他页面上视图中也会有几次崩溃。
我使用的是延迟加载，并且没有任何.subscribe正在打开，我要么应用了异步管道，要么在ngOnDestroy方法中强制取消订阅。
我试图通过检查来识
浏览 1提问于2019-09-17得票数 2
回答已采纳
2回答
如何将状态保持在角度2？
angular
我正在考虑如何设计一个精灵类型的应用程序。页面1上的组件需要与其他页面上的组件进行数据通信。考虑使用服务来保存注入到向导的下一个视图/组件中的状态/数据。整个事情应该是松散耦合的。我不认为设计一个可观察的模式是有用的，因为下一个页面/视图上的组件还不可见。angular 2中的哪些新功能可以用来解决这个问题？
浏览 0提问于2016-04-29得票数 10
回答已采纳
2回答
为什么角2比角1有更好的性能？
performance、angular
优秀的开发人员，我需要一点帮助来澄清为什么角2比角1更有表现力？
在搜索完网站之后，我从那里得到了一个相关的解释
Angular 2 is using Hierarchical Dependency Injection system which is major performance booster.
Angular 2 implements unidirectional tree based change detection which again increases performance .
As per ng-conf meetup, angular 2 is 5 times f
浏览 5提问于2016-08-05得票数 7
回答已采纳
1回答
用柱塞检测Angular2变化的误解
angular、plunker、angular2-changedetection
我正试图完全理解使用Angular2 final进行更改检测。
这包括：
处理变化检测策略
从组件中附加和分离变化检测器。
我以为我已经对这些概念有了一个相当清晰的概述，但是为了确保我的假设正确，我写了一个小柱塞来测试它们。
我对这个问题的总体理解是正确的，但在某些情况下，我有点迷失了方向。
下面是柱塞：
对柱塞的快速解释：
很简单：
一个父组件，您可以在其中编辑一个将被传递给两个子组件的属性：
关于将更改检测策略设置为OnPush的子级
关于将更改检测策略设置为默认的子级
父属性可以通过以下两种方法传递给子组件：
更改整个属性对象，并创建一个新的属性
浏览 3提问于2016-10-30得票数 8
回答已采纳
我碰巧在里看到了。它使用OnPush。
ChangeDetectionStrategy在Angular2中是什么，什么时候使用OnPush Vs默认？
浏览 0提问于2017-03-01得票数 17
回答已采纳
2回答
ChangeDetectionStrategy.OnPush会打破ControlValueAccessor的禁用状态
angular、typescript、angular-components、angular-forms
在我的Angular应用程序中，我通过实现接口创建了一个自定义表单元素。
因此，在我的组件中，我正确地实现了该接口的所有方法，包括setDisabledState
/**
* This function is called when the control status changes to or from "disabled".
* Depending on the value, it will enable or disable the appropriate DOM element.
*
* @param isDisabled
*/
setDisabledSta
浏览 5提问于2018-08-22得票数 5
回答已采纳
1回答
prodMode中的变化检测角度
angular、angular7、angular-changedetection
嗨，我在angular中得到这个错误“表达式在它被检查后被改变了”，但我的应用程序的行为是真的。第一个问题是，如果发生错误，为什么组件可以正常工作？
例如，我有两个兄弟组件，它们像这样使用它们：
<cmp-a (onSelectItem)="selectedItem = $event"></cmp-a>
<cmp-b [selectedItem]="selectedItem"></cmp-b>
当cmp-a中的onSelectItem发出时，我将error.but selectedItem正确地传递给cmp-b，一
浏览 0提问于2019-01-15得票数 0
3回答
正如标题所示:我正在从事一个非常大的项目，在少数组件中，我使用了ChangeDetectionStrategy.OnPush来避免糟糕的性能。我想知道，在需要的时候，将每个组件都放在这个策略中，并使用ChangeDetectionRef.detectChanges()以编程方式更新组件，这是否“好”呢？
--
这是我在应用程序中的一个小组件：
<my-map
(updatedGeometry)="setUpdatedGeometry($event)"
[startGraphEdit]="elementToEdit" [startCut]=
浏览 0提问于2018-11-22得票数 10
回答已采纳
2回答
什么是角的“单向数据流规则”？
angular
Angular的“单向数据流规则”被提到了 ，但是没有一个角度文档明确地定义了单向数据流规则(强调清晰的)。
下面是我能找到的最接近单向数据流规则的清晰定义：
来自
角的单向数据流规则禁止在视图合成后更新。
这是很公平的，但是，这到底意味着什么呢？什么构成了对视图的更新？我们不是一直在更新视图吗？
来自
一个重要的断言enableProdMode禁止验证更改检测传递不会导致对任何绑定(也称为单向数据流)的额外更改。
我不得不慢读8遍这句话，但我还是不明白。当它说“也称为单向数据流”时，我假设也称为单向数据流的东西是“更改检测传递不会导致对任何绑定的额外更改”。好吧，也许我们
浏览 3提问于2017-03-06得票数 15
回答已采纳
2回答
在不必要的时候，我们需要避免双向数据绑定吗？
javascript、angular、data-binding、angular2-forms
我搜索了很多，以了解如果我在表单中始终使用双向数据绑定(ng-model)而不是单向数据绑定，是否会有一些糟糕的性能。我知道，对于每个双向数据库绑定，使用angular 1都会创建一个新的监视，而使用angular 1的大型应用程序可能会因此而出现性能问题。现在我需要知道，如果使用angular 2，如果我只使用单向数据绑定，是否会有一些不同？在不必要时需要避免双向数据绑定？
浏览 1提问于2016-09-13得票数 5
1回答
角ChangeDetectionStrategy和禁用zone.js
angular、zonejs
我目前正在使用Ivy开发非常轻量级的角元素(v10.1.2)。
当我没有在我的zone.js中导入polyfills.ts并在我的main.ts中“禁用”它时，如下所示：
platformBrowserDynamic()
.bootstrapModule(AppModule, { ngZone: 'noop' })
.catch(err => console.error(err));
那么，我在组件上设置了什么样的ChangeDetectionStrategy仍然相关吗？
因此，如果我通过将组件标记为脏(ɵmarkDirty as markDirty)并具有默认的
浏览 3提问于2020-09-23得票数 1
回答已采纳
1回答
何时使用ChangeDetectorRef (角)
angular
我一直在做一个项目，我看到人们使用变化检测器。
cdRef.detectChanges()
对于何时显式地使用它来标记组件已经更改，我有点困惑。我们什么时候才能把它变成角呢？还是我在这里漏掉了什么？
浏览 1提问于2021-03-26得票数 2
回答已采纳
1回答
角度:使用setter与使用ngModelChange更新另一个字段(绑定到getter，setter在角世界中是不好的？)
angular、getter-setter
我有两个字段-一个html选择控件和一个文本输入控件。在选择控件中的选项时，文本输入应该被清除并用默认值更新(用户仍然可以编辑它)。
有两种方法-
a.使用setter & getter
<select [(ngModel)]="selectedItem ">
<option value="one">One</option>
...
</select>
<input [(ngModel)]="textValue">
textValue: string;
g
浏览 0提问于2018-08-09得票数 1
回答已采纳
4回答
React.Component对React.PureComponent
reactjs、state
官方的声明，"React.PureComponent's shouldComponentUpdate()只是肤浅地比较对象“，如果状态”很深“，则建议不要这样做。
考虑到这一点，在创建React组件时，人们是否应该更喜欢React.PureComponent？
问题
使用React.Component是否对性能有影响，我们可以考虑使用React.PureComponent
我猜shouldComponentUpdate() of PureComponent只会做一些肤浅的比较。如果是这样的话，难道不能用这种方法进行更深层次的比较吗？
“此外，React.PureCo
浏览 4提问于2016-12-27得票数 270
回答已采纳
4回答
角2有重绘优化吗？
javascript、angular、angular2-template
从几个月以来，我一直在使用React，而且React并不只是简单地重新呈现一个组件，而是找到了不同之处，并进行了这些更改。角质2做这样的事吗？
而且，当检测到状态变化时，角2是否重新呈现根节点中的所有组件，还是只重新呈现那些检测到变化的特定组件及其子树？
浏览 5提问于2016-04-24得票数 5
回答已采纳
3回答
@输入对象的角度变化检测
javascript、angular、angular2-changedetection
我有点理解变化检测在角2中是如何工作的，但是我真的很难将我的AngularJS方法转移到NG2中去检测变化。
假设我有一个组件，它接受一个@anObject() anObject，并且有一个函数，即anObject，为了参数起见，它将所有属性记录到控制台。我想做的就是每次anObject发生任何变化时都调用。
我理解，将对象视为不可变的对象(无论是使用Immutable.js这样的外部库，还是通过强制整个对象更改(即使是轻微的属性更改)，都会触发ngOnChange，但无论何时发生更改(除了这些更改之外，还是使用DoCheck )，都会调用函数吗?我了解到，使用DoCheck可能效率极低。
除
浏览 3提问于2017-03-29得票数 3
2回答
部分重绘是如何工作的？
javascript、reactjs、redux、react-redux
这个问题是关于用Redux进行部分再渲染的内部部件。
为了解释我的意思，我将首先介绍一种非常粗糙的技术来管理状态，而不使用任何状态管理语言。该技术使用了一个巨大的"AppState"-object，它属于顶级应用程序组件。假设这个AppState不仅包含状态属性，而且还保存了几个使这些状态属性发生变异的回调。此外，假设我们使用道具在整个组件层次结构中传递这个AppState。由于ES6扩展语法，不需要大量样板代码就可以传递大量的支持。在顶级应用程序组件中，它将如下所示：
<ChildComponent {...this.state} />
在所有其他组件中，它将如下
浏览 6提问于2020-04-10得票数 0
1回答
角5.0变化检测策略与React变化检测策略
angular、reactjs、angular2-changedetection、virtual-dom
我理解变更检测是如何在角5.0中工作的。
有人能帮助我理解中相同的工作原理是如何反应的，以及它与Angular的有多大的不同？
浏览 1提问于2017-11-20得票数 11
回答已采纳
1回答
Angular2设计-组件嵌套和性能风险
angular
当我必须构建一个具有许多功能的复杂页面时，我通常会得到一个设计，它将复杂的页面看作一系列更简单的组件的组合，这也可能是一个甚至更简单的组件的组合(换句话说，我指的是多个层次的嵌套组件)。
这样简单的组件并不是为可重用性而构建的(没有其他页面将使用它们)，而是为了使代码更容易阅读和理解(这仍然是一件好事)。
无论如何，我的问题是，通过组合和不同层次的嵌套构建一个页面的设计是否可能会严重影响性能，因此需要仔细观察。
我认为这个问题听起来可能有点模糊，但我基本上想知道的是，嵌套组件是否会对Angular2应用程序的性能造成严重的风险。我说的是合理数量的嵌套(比方说3-4层)和功能丰富度不能降低的页面
浏览 2提问于2016-05-04得票数 4
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
