Angular组件实现OnInit时报错：需添加显式Angular装饰器

核心问题分析 #

你的报错核心原因分为两种常见场景：

1. 初始代码的显性错误 #

你最初的组件类同时使用了@Component和@Injectable装饰器，这是错误的：

• @Component本身已经具备组件所需的依赖注入能力，@Injectable是专门给服务类使用的装饰器，重复添加会导致Angular无法正确识别组件类型。
• 同时你的styleUrls里存在文件名拼写错误：address-card.cpmponenet.css应改为address-card.component.css，拼写错误也可能触发编译器异常。

2. 新组件仍报错的隐性原因 #

即使是ng generate生成的组件也报错，大概率是缓存或配置类问题。

分步解决方案 #

步骤1：修正初始代码错误 #

将组件代码修改为：

import { Component, Input, OnInit } from '@angular/core';
import { User } from './user.model';

@Component({
  selector: 'app-address-card',
  templateUrl: './address-card.component.html',
  styleUrls: ['./address-card.component.css'] // 修正拼写错误
})
// 移除多余的@Injectable()装饰器
export class AddressCardComponent implements OnInit{
  user: any;
 @Input('user') userDTO?: User;
  ngOnInit(): void {
    this.user = {
      name: this.userDTO?.name,
      title: this.userDTO?.designation,
      address: this.userDTO?.address,
      phone:this.userDTO?.phone
    };
  }
}

步骤2：处理新组件的报错问题 #

如果修改后仍报错，执行以下操作：

• 清理Angular缓存：运行命令 ng cache clean，然后重启开发服务器 ng serve。
• 检查组件声明：打开对应模块文件（如app.module.ts），确认declarations数组中包含AddressCardComponent。
• 验证TypeScript配置：打开tsconfig.json，确保angularCompilerOptions中的emitDecoratorMetadata设为true，可临时关闭strictTemplates测试是否为严格模式冲突。

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