Angular报错：LoanComponent类型上不存在darkModeService属性

核心错误点是构造函数注入DarkModeService时漏写访问修饰符。

TypeScript的构造函数参数如果要自动绑定为类的实例属性（也就是可以通过this.xxx访问），必须给参数加上private/public/protected任意一个访问修饰符。你贴的代码里前三个注入的服务都加了private，唯独darkModeService没加，这个参数就只是构造函数内部的局部变量，类其他位置访问this.darkModeService自然会报不存在。
另外你当前写的类属性初始化顺序也有隐患：类属性的初始化代码会在构造函数执行前运行，就算补了修饰符，直接在属性定义位置通过this.darkModeService赋值也可能拿到未初始化的服务实例，建议把属性初始化挪到构造函数内。

修复操作 #

• 给构造函数的darkModeService参数补上private修饰符
• 调整darkMode$的初始化位置，避免初始化顺序问题

修复后的参考代码：

import { Observable } from 'rxjs';
// 其他原有导入省略...

@Component({
  // 组件原有配置省略...
})
export class LoanComponent {
  range = new FormGroup({
    fromDate: new FormControl('', Validators.required),
    toDate: new FormControl('', Validators.required)
  });

  darkMode$: Observable<boolean>;

  // 最后一个注入参数补private修饰符
  constructor(
    private bookService: BookService, 
    private categoryService: CategoryService,  
    private formBuilder: FormBuilder, 
    private darkModeService: DarkModeService
  ) {
    // 构造函数内初始化darkMode$
    this.darkMode$ = this.darkModeService.darkMode$;
  }

  ngOnInit(): void {
    this.dateRangeForm = this.formBuilder.group({
      fromDate: new FormControl('', Validators.required),
      toDate: new FormControl('', Validators.required)
    });
  }

  onToggle(): void {
    this.darkModeService.toggle();
  }
}

补完修饰符后如果IDE还飘红，重启下TypeScript服务或者重新执行ng serve即可，编译错误会直接消失。

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