Angular混合应用：Chrome中Select组件模型更新异常问题求助

问题现象 #

将表单下拉框从AngularJS迁移到Angular后，Firefox和Edge中控件运行正常，但Chrome环境下，只有切换标签页并返回后，angularJS.countryCode模型才会更新。不过所有浏览器中，下拉框触发change事件时，processCountry()函数都能正常执行。

原AngularJS代码 #

<select class="form-control"
        ng-model="angularJS.countryCode" 
        ng-init="angularJS.countryCode = defaultCountryCode" 
        ng-change="controller.processCountry($event);" 
        required>
  <option value="" selected>(Select Country)</option>
  <option ng-repeat="country in countries | uppercase | orderBy:'name'" value="{{country.isoCode}}">{{ country.name }}</option>
</select>

重构后的Angular代码 #

<select id="countryCode" name="countryCode" class="form-control"
      [(ngModel)]="angularJS.countryCode" 
      (ngModelChange)="controller.processCountry($event)" 
      required>
    <option value="" translate>(Select country)</option>
    <option *ngFor="let country of countries | orderBy:'officialName'" [ngValue]="country.isoCode">{{country.name | uppercase}}</option>
</select>

解决方案 #

1. 手动触发Angular变更检测

混合应用中Angular与AngularJS的变更检测机制可能存在冲突，Chrome的事件处理逻辑导致Angular未及时感知模型变化。可在processCountry()方法中手动触发变更检测：

import { ChangeDetectorRef } from '@angular/core';

// 组件构造函数注入ChangeDetectorRef
constructor(private cdr: ChangeDetectorRef) {}

processCountry(event: any) {
  // 原有业务逻辑
  // ...
  
  // 手动触发变更检测
  this.cdr.detectChanges();
}

2. 避免直接绑定AngularJS变量

直接绑定AngularJS作用域变量可能导致Angular无法跟踪变化，建议在Angular组件中维护本地变量，同步后再更新到AngularJS变量：

<select id="countryCode" name="countryCode" class="form-control"
      [(ngModel)]="localCountryCode" 
      (ngModelChange)="onCountryChange($event)" 
      required>
    <option value="" translate>(Select country)</option>
    <option *ngFor="let country of countries | orderBy:'officialName'" [ngValue]="country.isoCode">{{country.name | uppercase}}</option>
</select>

localCountryCode: string;

// 初始化同步AngularJS的值
ngOnInit() {
  this.localCountryCode = this.angularJS.countryCode;
}

onCountryChange(code: string) {
  this.controller.processCountry(code);
  // 同步回AngularJS变量
  this.angularJS.countryCode = code;
  // 按需手动触发变更检测
  this.cdr.detectChanges();
}

3. 确保事件在Angular Zone中执行

若事件触发跑出了Angular的Zone，可使用NgZone包裹事件处理逻辑：

import { NgZone } from '@angular/core';

constructor(private zone: NgZone) {}

// 模板中修改事件绑定为(change)="onCountryChange($event)"
onCountryChange(event: any) {
  this.zone.run(() => {
    this.controller.processCountry(event.target.value);
    this.angularJS.countryCode = event.target.value;
  });
}

内容的提问来源于stack exchange，提问作者mccarthyj