Angular中elementRef.nativeElement.setAttribute触发ESLint错误的修复方案

错误根源不是keyword的类型问题，而是elementRef.nativeElement默认类型为any，TypeScript无法确定它的具体类型，导致ESLint判定成员访问不安全。以下是几种可行的修复方案：

方案一：给ElementRef指定具体元素类型（推荐） #

通过给ElementRef添加泛型，明确指定nativeElement的类型为DOM元素（比如HTMLElement），让TypeScript能识别其方法：

import { ..., ElementRef } from '@angular/core';

constructor(
    ...,
    private elementRef: ElementRef<HTMLElement> // 声明泛型类型
) { }

ngOnInit(): void {
    const keyword: string = 'xyz';
    this.elementRef.nativeElement.setAttribute('key', keyword);
}

方案二：类型断言明确nativeElement类型 #

如果无法提前确定元素类型，可直接将nativeElement断言为HTMLElement：

ngOnInit(): void {
    const keyword: string = 'xyz';
    (this.elementRef.nativeElement as HTMLElement).setAttribute('key', keyword);
}

方案三：临时禁用该行ESLint规则（不推荐） #

仅在特殊场景下使用，直接关闭该行的规则检查：

ngOnInit(): void {
    const keyword: string = 'xyz';
    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
    this.elementRef.nativeElement.setAttribute('key', keyword);
}

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