Angular:使用ChangeDetectionStrategy.OnPush监听模型
Angular是一种基于TypeScript构建的开源JavaScript框架，用于构建现代化的Web应用程序。它具有丰富的功能集，包括强大的模板系统、组件化架构、模块化开发和依赖注入等。Angular的ChangeDetectionStrategy.OnPush是一种变化检测策略，用于监听模型的变化并更新视图。
ChangeDetectionStrategy.OnPush的特点是通过检测输入属性的引用是否发生了变化来决定是否需要重新渲染组件。如果输入属性的引用没有发生变化，Angular将假定该组件的状态没有改变，从而跳过重新渲染过程，以提高性能和响应速度。这一策略适用于那些不频繁变化的组件，可以有效减少不必要的渲染操作。
ChangeDetectionStrategy.OnPush适用于以下场景：
- 对于纯展示组件或只读数据展示的组件，可以使用该策略来提升性能。
- 当组件的输入属性很少发生变化时，可以考虑采用该策略。
- 在大规模数据展示的场景中，使用该策略可以减少不必要的渲染操作，提高性能。
在腾讯云的产品中，推荐使用云服务器CVM来部署和运行Angular应用程序。云服务器CVM提供稳定可靠的计算能力和弹性扩展能力，适用于各种规模的Web应用程序。您可以通过以下链接了解更多关于云服务器CVM的详细信息和使用指南： https://cloud.tencent.com/product/cvm
同时，腾讯云还提供了云数据库MySQL和云对象存储COS等产品，可以用于存储和管理Angular应用程序所需的数据和静态资源。您可以通过以下链接了解更多关于云数据库MySQL和云对象存储COS的详细信息和使用指南：
- 云数据库MySQL：https://cloud.tencent.com/product/cdb
- 云对象存储COS：https://cloud.tencent.com/product/cos
总结：Angular的ChangeDetectionStrategy.OnPush是一种变化检测策略，适用于那些不频繁变化的组件，可以有效提升性能。在腾讯云中，推荐使用云服务器CVM来部署和运行Angular应用程序，同时可以搭配云数据库MySQL和云对象存储COS来存储和管理应用程序所需的数据和静态资源。
相关·内容
假设我有一个大的Json模型，我的后端发送给我的前端，它看起来像这样： { dataB: { //some object },`class AppComponent {
} 我想让这些组件使用OnPush变更检测策略。当接收到新模型时，可能会发生模型中的数据字段与前一个模型中的值没有变化的情况，因此我不希望它们再次作为@Input()传递给组件，以避免运行无用的更改检测。在将数据作为@I
浏览 78提问于2019-03-12得票数 0
回答已采纳
我有两个组件，其中我使用ChangeDetectionStrategy.OnPush。父组件： changeStaregy: ChangeDetectionStrategy.OnPush, <buttonTestComponent { 当我单击"clear“按钮时，它调用onClick()函数，该函数将一个空实体分配给”模型</em
浏览 0提问于2017-07-24得票数 5
在多个位置使用组件时获取ExpressionChangedAfterItHasBeenCheckedError，后者订阅用于加载的行为对象。
浏览 0提问于2019-07-09得票数 0
回答已采纳
1回答
我需要在AbstractComponent中监听一个事件。但是，当事件被激发时，AbstractComponent上的handle方法被调用两次。@Component({ changeDetection: ChangeDetectionStrategy.OnPush,export/core/services/log.service";
selector: 'SecondLogCom
浏览 7提问于2021-02-17得票数 0
2回答
我正在开发一个angular 5.2应用程序。我在我的基础组件中有10个选项卡。并且每个选项卡都有自己的组件(4个组件)。所以我的每个标签都有一个非常繁重的处理。现在，我的问题是，如果我更新Tab的任何子组件，angular运行所有选项卡及其子组件上的changeDetection，这会使我的应用程序变得非常慢。有没有办法告诉angular在页面的特定部分运行更改检测？
浏览 0提问于2018-10-09得票数 2
我使用的是angular4，并且有一个动态加载的组件。我想实现ChangeDetectionStrategy.OnPush策略，但它似乎不起作用，即使我知道输入对象是全新的。我知道正常的更改检测不适用于动态加载的组件，但是有没有一种方法可以通过编程方式推送更改，以便ChangeDetectionStrategy.OnPush可以检测到更改？
浏览 3提问于2018-03-02得票数 1
1回答
我正在尝试使用angular ，当我使用ChangeDetectionStrategy.OnPush时，我面临着一个变化检测问题。我想知道是否有办法仍然使用ChangeDetectionStrategy.OnPush。有没有办法将组件分配给特定的树？目前，我将所有相关组件从onPush更改为Default，应用程序运行良好，但我确实更喜欢使用onPush策略。
浏览 2提问于2017-07-31得票数 2
我想知道这是不是标准行为，还是我做错了什么。基本上，我已经分配了一个函数，该函数将一个观察值返回给ngStyle，每次鼠标移动时都会触发该函数。
[ngStyle] = "{'background': getImageForDocument(document) | async}">
getImageForDocument(document, m
浏览 16提问于2019-08-02得票数 0
回答已采纳
我已经创建了几个反应子窗体，它们已经使用FormGroupDirective连接到父窗体组，但是当我在添加控件后从ngAfterViewInit中的父窗体更新子窗体验证器，并调用updateValueAndValidity
浏览 26提问于2019-09-26得票数 0
回答已采纳
在我的应用程序中，在视图的模型被更新后，我在“刷新”视图时遇到了很大的麻烦。主要是当API调用被解析并且它的响应数据应该在该视图上发布时。} from '@angular/forms';
selector: 'app-service', changeDetection: ChangeDetectionStrategy.OnPush
浏览 0提问于2020-05-15得票数 0
1回答
我有两个组件，一个父组件和一个子组件：@Component({ template: ` <button (click)="prevVal($event)"></button>
<child-directive [content]="myValue">
浏览 0提问于2016-08-05得票数 1
我想知道是否有更好的方法来根据输入到组件的值对角分量(比我现在正在做的)进行计算。<ng-container></ng-container>在控制器上，我有一个方法：
calculatePercentage(stock.name, stock.paid, stock.quantity,
浏览 3提问于2020-06-21得票数 0
回答已采纳
我指的是这个例子
浏览 0提问于2018-09-15得票数 0
回答已采纳
1回答
我试图通过一个函数加载工作日，我需要通过调用一个函数来加载工作日，这样我就可以验证它的工作时间。如果我用list创建了一个公共变量，那么它可以工作，但是我需要执行方法调用来执行逻辑，然后返回一个列表。 public getWorkDays() {
let workDays = [1,2,3];
浏览 0提问于2019-09-09得票数 1
回答已采纳
-- List of components --> </div>
每次使用(scroll)侦听器滚动它时，它都会重新加载父组件，因此滚动位置始终弹回0，因为它已重新加载。有没有人对嵌入式组件和滚动监听器可能出现的问题有什么想法？将不胜感激！
浏览 0提问于2018-08-10得票数 7
在为angular 2.0做准备时，我使用了聚合物。有没有人知道目前的聚合物实现是否准备就绪，以便Angular 2.0能够接收来自聚合物组件/模型的更新。目前，只有聚合物可以监听angular模型更新。
我希望我目前的用户界面是为angular 2.0做好准备的，理想情况下不需要对聚合物代码做太多修改。
浏览 2提问于2014-08-13得票数 1
1回答
我也在寻找一种使用常规图标的方法。有没有使用常规图标的方法？import { Component, ChangeDetectionStrategy } from '@angular/core';
}`]export class IconEnvelopeComponent{}
changeDetectio
浏览 0提问于2018-07-27得票数 0
我不能在角度材料表上更新一行，当我改变一个单元格(对象表中的一个字段)的值时，该字段的值实际上是改变的，但它不直接显示在浏览器上，如何使行的更新在执行按钮操作时在浏览器上动态显示查看：
<ng-container matColumnDef="
浏览 0提问于2020-05-06得票数 0
这很奇怪 "@swimlane/ngx-datatable": "^16.1.1",<ngx-datatable id="table1" [rows]=
浏览 2提问于2020-05-06得票数 0
使用以下使用changeDetection的代码: ChangeDetectionStrategy.Default export class HomePageComponent { ) {} return this.i18nService.language;} angular更新视图但使用changeDetection: ChangeDetectionStrateg
浏览 10提问于2020-11-03得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
即时通信 IM活动推荐
腾讯云开发者
