Angular井字棋：外部数组无法引用更新值的问题及优化方案

• 组件外部的代码会在组件类实例创建之前就执行，这时候this.gb还没被Angular完成初始化，自然只能拿到初始空值。
• 而把potentialWinningCombos放在checkForWin()内部时，每次调用函数都是在组件实例化完成之后，this.gb已经加载了实际的棋盘数据，所以能正确引用。

完全可以保留外部设计，核心思路是把获胜组合从直接引用this.gb元素，改成固定的索引组合——毕竟井字棋的获胜位置是固定的（3x3棋盘的横竖斜位置不会变），不用依赖gb的具体值：

1. 先在组件外部声明固定的索引组合：

// 组件外部定义固定的获胜索引组合
const WINNING_INDEX_COMBOS = [
  [0, 1, 2], // 第一行
  [3, 4, 5], // 第二行
  [6, 7, 8], // 第三行
  [0, 3, 6], // 第一列
  [1, 4, 7], // 第二列
  [2, 5, 8], // 第三列
  [0, 4, 8], // 左上到右下
  [2, 4, 6]  // 右上到左下
];

2. 然后在checkForWin()里，用这些索引去取当前this.gb的值来判断：

checkForWin(): boolean {
  for (const combo of WINNING_INDEX_COMBOS) {
    const [a, b, c] = combo;
    // 检查当前棋盘这三个位置的值是否相同且不为空
    if (this.gb[a] && this.gb[a] === this.gb[b] && this.gb[a] === this.gb[c]) {
      return true;
    }
  }
  return false;
}

这样既实现了外部声明，不用每次调用函数时重建组合数组，又完全避开了依赖this.gb初始值的问题——因为我们只存固定的索引，每次判断时才去拿当前棋盘的最新值。

如果你的gb是二维数组（比如gb[0][0]这种格式），只需要把索引组合改成二维结构即可，比如[[0,0], [0,1], [0,2]]，判断逻辑保持一致。

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