Angular循环获取@ViewChild模板引用并推入数组时类型报错的解决方法

我太懂你遇到的这个问题了！在Angular里用循环批量处理@ViewChild的模板引用时，TypeScript的强类型检查总会出来“捣乱”，这个类型报错本质是TS没法确定你用字符串索引this时对应的属性类型。下面给你几个实用的解决思路：

方法一：给模板名称列表指定严格的类型约束 #

我们可以明确告诉TypeScript，templatesList里的元素都是当前组件类中类型为TemplateRef<any>的属性名，这样TS就能识别出this[key]的类型了：

// 先定义一个类型，代表当前组件中属于TemplateRef类型的属性名
type TemplateRefKeys = 'one' | 'two';

@Component({
  // 组件元数据...
})
export class YourComponent implements AfterViewInit {
  @ViewChild('one') one!: TemplateRef<any>;
  @ViewChild('two') two!: TemplateRef<any>;
  @ViewChild('three') three!: TemplateRef<any>;

  // 给templatesList指定严格类型
  templatesList: TemplateRefKeys[] = ['one','two'];
  templateRefsList: Array<TemplateRef<any>> = [];

  ngAfterViewInit(): void {
    // 现在循环里访问this[key]就不会报错了
    for (const key of this.templatesList) {
      this.templateRefsList.push(this[key]);
    }
  }
}

方法二：临时使用类型断言（快速解决但要注意安全性） #

如果你想快速解决问题，也可以用类型断言直接告诉TS，你访问的这个属性就是TemplateRef<any>类型，不过要确保templatesList里的元素确实是已定义的@ViewChild属性，不然可能会出现运行时错误：

ngAfterViewInit(): void {
  // 注意：这里修复了你原始代码里的语法错误——把i++前面的逗号改成分号！
  for (let i = 0; i < this.templatesList.length; i++) {
    const templateKey = this.templatesList[i];
    // 用类型断言明确指定类型
    this.templateRefsList.push((this as any)[templateKey] as TemplateRef<any>);
  }
}

方法三：提前创建映射对象（最安全直观的方式） #

你可以先创建一个键值对对象，把字符串名称和对应的@ViewChild引用一一对应起来，这样循环的时候直接取对象的属性，类型完全安全，可读性也更好：

@Component({
  // 组件元数据...
})
export class YourComponent implements AfterViewInit {
  @ViewChild('one') one!: TemplateRef<any>;
  @ViewChild('two') two!: TemplateRef<any>;
  @ViewChild('three') three!: TemplateRef<any>;

  templatesList = ['one','two'];
  templateRefsList: Array<TemplateRef<any>> = [];
  // 提前创建映射关系
  private templateMap!: Record<'one'|'two'|'three', TemplateRef<any>>;

  ngAfterViewInit(): void {
    // 在ngAfterViewInit里赋值映射，因为@ViewChild此时才初始化完成
    this.templateMap = {
      one: this.one,
      two: this.two,
      three: this.three
    };
    
    for (const key of this.templatesList) {
      this.templateRefsList.push(this.templateMap[key]);
    }
  }
}

另外提个小细节：你原始代码里的for循环有个语法错误——i < templatesList.length后面用了逗号而不是分号，这个也得改过来，不然代码运行会出问题哦！

备注：内容来源于stack exchange，提问作者Charmi