如何将chrome.storage.sync.get数据赋值给Angular组件变量

因为chrome.storage.sync.get是基于回调的异步API，要等待它的结果并正确更新Angular组件变量，最简洁的方式是把它封装成Promise，再结合async/await语法让异步代码同步化，同时利用Angular的变更检测自动触发组件渲染。

修改后的组件代码 #

export class KTableComponent implements OnInit {

  words: string[] = [];

  constructor() {
  }

  ngOnInit(): void {
    this.loadData(); // 组件初始化时加载数据
  }

  async loadData() {
    // 把chrome.storage.sync.get封装为Promise
    const result = await new Promise<{words: string[]}>((resolve) => {
      chrome.storage.sync.get({words: []}, resolve);
    });
    // 直接赋值，Angular会自动检测到变量变化并重新渲染组件
    this.words = result.words;
    // 这里可以写数据加载完成后的逻辑，比如处理数据、调用其他方法等
  }
}

关键说明 #

• Promise封装：将回调式的API转为Promise，是为了适配async/await，让异步代码的流程更清晰，避免回调嵌套。
• async/await：loadData标记为async后，内部用await等待Promise完成，确保后续代码在数据返回后执行。
• 直接赋值数组：相比Object.assign修改数组内容，直接替换this.words的引用能更可靠地触发Angular的变更检测，确保组件视图及时更新。
• 初始化调用：在ngOnInit中调用loadData，保证组件初始化时就加载数据，符合Angular的生命周期逻辑。

如果你的组件用了ChangeDetectionStrategy.OnPush变更检测策略，可能需要手动触发变更检测，此时可以注入ChangeDetectorRef并调用detectChanges()：

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

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

async loadData() {
  const result = await new Promise<{words: string[]}>((resolve) => {
    chrome.storage.sync.get({words: []}, resolve);
  });
  this.words = result.words;
  this.cdr.detectChanges(); // 手动触发变更检测
}

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