javascript – 角度变化检测运行八次而不是四次

我知道如果我们正在开发Angular运行两次更改检测.在以下示例中,Angular运行四次更改检测.为什么会这样？

class Category {
  constructor( private _id ) {
  }

  get id() {
    console.log('id');
    return this._id;
  }

}

@Component({
  selector: 'app-select',
  template: `
      <select class="form-control">
        <option *ngFor="let option of options;" [value]="option.id">{{option.id}}</option>
      </select>
  `,
})
export class SelectComponent {
  @input() options;
}

@Component({
  selector: 'my-app',
  template: `
    <app-select [options]="options"></app-select>
  `,
})
export class App {
  options = [new Category(1)]
}

@NgModule({
  imports: [ browserModule ],
  declarations: [ App, SelectComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

如果您运行上面的代码,您将看到控制台日志运行八次而不是四次.

解决方法:

我知道它没有记录,但在bootstraping应用程序时,angular会运行额外的appRef.tick

 private _loadComponent(componentRef: ComponentRef<any>): void {
    this.attachView(componentRef.hostView);
    this.tick();

https://github.com/angular/angular/blob/4.3.x/packages/core/src/application_ref.ts#L540

然后它调用主处理程序来运行更改检测

this._zone.onMicrotaskEmpty.subscribe(
    {next: () => { this._zone.run(() => { this.tick(); }); }});

https://github.com/angular/angular/blob/4.3.x/packages/core/src/application_ref.ts#L445

在tick方法中,angular运行detectChanges方法

this._views.forEach((view) => view.detectChanges()); 

https://github.com/angular/angular/blob/master/packages/core/src/application_ref.ts#L561

并在开发模式下更改NoChanges

if (this._enforceNoNewChanges) {
    this._views.forEach((view) => view.checkNoChanges());
}

https://github.com/angular/angular/blob/master/packages/core/src/application_ref.ts#L563

因此角度运行在第一次初始化时改变检测4次.

因为你在模板中使用了两次getter

[value]="option.id">{{option.id}}

它会执行两次,最后你会得到8个电话