现在让我们通过一个示例来演示如何在 Angular 中使用 ChangeDetectionStrategy.OnPush。 假设我们有一个简单的组件CostCenterComponent,用于显示成本中心的信息。组件的定义如下: import { Component, Input, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'cx-cost-center', templateUrl: '....
假设我们有一个简单的组件CostCenterComponent,用于显示成本中心的信息。组件的定义如下: import { Component, Input, ChangeDetectionStrategy } from '@angular/core'; @Component({ selector: 'cx-cost-center', templateUrl: './checkout-cost-center.component.html', changeDetection: ChangeDetectionStrategy.OnPu...
手动触发变更检测可以通过调用detectChanges()方法来实现。在组件中可以通过ChangeDetectorRef来获取变更检测器实例,并调用detectChanges()方法来手动触发变更检测。示例代码如下: import{Component,OnInit,ChangeDetectorRef}from'@angular/core';@Component({selector:'app-my-component',template:'{{ value }}'})exportc...
@Component({ selector: 'todo-list', changeDetection: ChangeDetectionStrategy.OnPush, template: ...})export class TodoList { ...} 现在让我们在应用程序中添加几个按钮：一个是通过直接改变列表的第一项来切换列表的第一项，另一个是向整个列表添加一个 Todo。代码如下所示：@Component({ select...
与上面代码相比, 只在movie.component.ts中的@component中增加了一行代码: changeDetection:ChangeDetectionStrategy.OnPush 此时, 当点击第一个按钮时, 检测到star没有发生变化, ok,变化检测到此结束, 不会进入到子组件中, 视图不会发生变化. 当点击第二个按钮时,检测到star发生了变化, 然后变化检测进入到子组件中...
Angular的变化检测可以分组件进行,每一个Component都对应有一个changeDetector,我们可以在Component中通过依赖注入来获取到changeDetector。而我们的多个Component是一个树状结构的组织,由于一个Component对应一个changeDetector,那么changeDetector之间同样是一个树状结构的组织....
+` }) export class CounterComponent { counter = 0; countUp() { this.counter++; } } 页面首次渲染完后,计数器的当前值为0。当我们点击 + 按钮时,计数器的 counter 值将会自动加1,之后页面中当前值也会被更新。在这个例子中,点击事件引起了 counter 属性值的变化。
使用NgZone.runOutsideAngular()方法:在组件中注入NgZone,并在单击事件处理程序中使用runOutsideAngular()方法来运行代码。这将使代码在Angular的变更检测之外运行,从而避免触发change detection。 示例代码: 代码语言:typescript 复制 import{Component,NgZone}from'@angular/core';@Component({selector:'app-example',te...
而我们的多个component是一个树状结构的组织,由于一个component对应一个changeDetector,那么changeDetector之间同样是一个树状结构的组织。 最后我们需要记住的一点是,每次变化检测都是从树根开始的。 枯燥无味的理论到此结束,下面通过一些例子来直观的感受一下。
export class UserComponent { @Input() user: User; } 在上面的代码中,我们使用了changeDetection: ChangeDetectionStrategy.OnPush来启用OnPush策略。这意味着当user输入属性发生变化时,才会触发变更检测。 除此之外,我们还需要定义一个User类来表示用户对象: ...