Chrome扩展中变量更新但Data binding未更新问题（Angular4）

我之前在开发Chrome扩展用Angular的时候也碰到过一模一样的情况！问题出在Chrome的API回调是运行在Angular的NgZone之外的，这就导致Angular的变更检测机制根本没察觉到selectedText变量的变化，所以视图自然不会同步更新。

下面是具体的解决步骤：

1. 引入并注入NgZone #

首先在你的组件文件里导入NgZone，然后在构造函数里注入它，把变量赋值操作放到zone.run()方法内，强制触发Angular的变更检测：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent {
  selectedText: string = '';

  constructor(private zone: NgZone) {}

  getSelectedText() {
    // 调用Chrome标签页API获取选中内容
    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
      chrome.tabs.executeScript(
        tabs[0].id,
        {code: 'window.getSelection().toString();'},
        (results) => {
          // 把赋值操作包裹在zone.run()中，让Angular感知到变量变化
          this.zone.run(() => {
            this.selectedText = results[0];
          });
        }
      );
    });
  }
}

2. 检查FormsModule是否已导入 #

别忘了在你的模块文件里导入FormsModule，因为[(ngModel)]双向绑定完全依赖这个模块才能生效：

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { YourComponentComponent } from './your-component.component';

@NgModule({
  imports: [FormsModule],
  declarations: [YourComponentComponent]
})
export class YourModule {}

额外排查小提示 #

• 确保selectedText变量已经正确初始化（比如设为空字符串''），避免初始值为undefined导致绑定异常。
• 如果还是有问题，可以尝试手动触发变更检测（不过用NgZone是更规范的做法）：导入ChangeDetectorRef并在赋值后调用this.cdr.detectChanges()，但优先推荐NgZone的解决方案。

这样修改后，当你点击按钮获取选中内容时，Angular就能检测到selectedText的变化，textarea的视图也会同步更新啦！

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