Each component has its own ChangeDetectorRef, and we can inject ChangeDetectorRef into constructor: export class ChildComponent implements OnInit { constructor( private cdr: ChangeDetectorRef ) For example if you have a huge list can be updated in re…

ANGULAR CHANGE DETECTION EXPLAINED 引发脏治检查有三种方式: Events - click, submit, - XHR - Fetching data from a remote server Timers - setTimeout(), setInterval() 跳过子组件检查 跳过没必要的子组件检查可以提升性能 input是一个observables的时候, 如何实现跳过DC? @Component({ template: '{{counter}}',…

In this article I will talk in depth about the Angular 2 change detection system. HIGH-LEVEL OVERVIEW An Angular 2 application is a tree of components. An Angular 2 application is a reactive system, with change detection being the core of it. Every c…

When you testing Component rendering, you often needs to call: fixture.detectChanges(); For example: it('should display original title', () => { fixture.detectChanges(); expect(el.textContent).toContain(comp.title); }); it('should display a different…

Harmonic change detection function (HCDF) 是根据 Tonal Centroid (TC)实现的,首先TC如何提取? Step 1. 提取PCP特征 Step 2. 根据协和度的概念,给出3*2向量的计算方法…

我们知道,如果我们绑定了组件数据到视图,例如使用 <p>{{content}}</p>,如果我们在组件中改变了content的值,那么视图也会更新为对应的值. angular 会在我们的组件发生变化的时候,对我们的组件执行变化检测,如果检测到我们的数据发生了变化,就会执行某些操作,如修改绑定数据的时候更新视图. 这样一来,当我们的组件数据比较多的时候,angular就会有很多操作在静悄悄地进行,一个规避这个问题的方法是,设置某个组件的变化检测策略为 'OnPush'. 使用 OnP…

updatePassenger(passenger: Passenger): Observable<Passenger> { let headers = new Headers({ 'Content-Type': 'application/json' }); let options = new RequestOptions({ headers: headers }); return this.http .put(`${PASSENGER_API}/${passenger.id}`, passe…

Creating custom validators is easy, just create a class inject AbstractControl. Here is the form we want to validate it: form = this.fb.group({ store: this.fb.group({ branch: ['', [Validators.required, StockValidators.checkBranch]], code: ['', Valida…

By default the response body doesn’t contain all the data that might be needed in your app. Your server might return some special header which you have to read explicitly. In such case we can use the { observe: ‘response’} configuration of the Angula…

Create a custom validtor which only accepts the string start with '123'; function skuValidator(control){ if(!control.value.match(/^123/)){ return {invalidSku: true}; } } If it not start with 123, then return the object {invalidSku: true}, which later…