Ionic6-Angular导入DOCUMENT时报参数装饰器签名无法解析错误如何解决

• 你混淆了Angular的两种依赖注入语法：构造函数参数装饰器@Inject()和函数式注入方法inject()，代码中误将装饰器写为了小写的@inject
  • 首字母大写的@Inject()是构造函数参数专用装饰器，用来注入InjectionToken类型的依赖（比如本场景的DOCUMENT）
  • 首字母小写的inject()是Angular 14+推出的函数式注入API，只能在类属性初始化/构造函数内部调用，不能作为装饰器修饰参数
• 额外问题：构造函数参数名和注入TokenDOCUMENT重名，容易触发命名冲突，建议改为小写document

解决方法1：修正装饰器写法（兼容所有Angular版本） #

直接修改构造函数的装饰器首字母即可，完整修改后代码：

import { DOCUMENT } from '@angular/common';
// 导入Inject装饰器，不是小写的inject
import { Inject, Injectable} from '@angular/core';
import { Renderer2, RendererFactory2 } from '@angular/core'; 

@Injectable({ providedIn: 'root' })
export class ThemeService {
  private renderer: Renderer2; 
  constructor(
    rendererFactory:RendererFactory2, 
    @Inject(DOCUMENT) private document: Document
  ) { 
    this.renderer = rendererFactory.createRenderer(null,null);
  }
}

解决方法2：使用函数式注入（仅Angular 14及以上版本可用） #

如果你的项目Angular版本大于等于14，可以直接用函数式注入语法，不需要写构造函数参数装饰器，代码更简洁：

import { DOCUMENT } from '@angular/common';
// 直接导入小写的inject函数
import { inject, Injectable} from '@angular/core';
import { Renderer2, RendererFactory2 } from '@angular/core'; 

@Injectable({ providedIn: 'root' })
export class ThemeService {
  // 直接在属性初始化阶段调用inject完成注入
  private rendererFactory = inject(RendererFactory2);
  private document = inject(DOCUMENT);
  private renderer: Renderer2 = this.rendererFactory.createRenderer(null,null);

  constructor() {}
}

两种方案都可以完全解决ts(1239)报错，根据你项目的Angular版本选择即可。

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