Angular夯实根基01，Angular 组件入门：吃透 @Component 装饰器，掌握组件创建、注册与使用-程序员充电站

在 Angular 的前端开发体系中，组件（Component）是构建用户界面的核心单元，它将视图、逻辑和样式封装成独立的可复用模块。而@Component装饰器则是定义 Angular 组件的 “灵魂”—— 通过它我们能告诉 Angular 如何解析、渲染组件，以及组件如何与应用其他部分交互。本文将从@Component装饰器入手，一步步讲解 Angular 组件的创建、注册与使用，帮你夯实组件开发的基础。

一、核心概念：什么是 Angular 组件？

Angular 组件本质上是一个被@Component装饰器修饰的 TypeScript 类，它承载了三部分核心内容：

模板（Template）：定义组件的视图结构（HTML），决定用户看到的内容；
类（Class）：包含组件的业务逻辑（TypeScript），处理数据、事件、交互等；
样式（Styles）：定义组件的外观（CSS/SCSS 等），且样式默认作用域仅局限于当前组件。

组件是 Angular 应用的 “积木”，从页面级的根组件（AppComponent），到按钮、卡片等通用 UI 组件，都基于这一模式构建。

二、@Component 装饰器：组件的 “配置说明书”

@Component是 Angular 核心库@angular/core提供的装饰器，它接收一个元数据对象作为参数，用于配置组件的核心属性。先看一个最基础的@Component配置示例：

import { Component } from '@angular/core'; @Component({ // 组件唯一标识，用于模板中调用 selector: 'app-hello', // 内联模板（也可通过templateUrl指向外部HTML文件） template: `<h1>Hello, {{ name }}!</h1>`, // 内联样式（也可通过styleUrls指向外部样式文件） styles: [`h1 { color: #1677ff; }`] }) export class HelloComponent { // 组件类的属性，供模板绑定 name = 'Angular Component'; }

下面拆解@Component元数据中最常用的核心配置项：

1. selector：组件的 “调用标签”

selector是组件的唯一选择器，决定了如何在其他模板中引用该组件，支持三种写法：

元素选择器（推荐）：如app-hello，使用时直接写<app-hello></app-hello>；
属性选择器：如[app-hello]，使用时写<div app-hello></div>；
类选择器：如.app-hello，使用时写<div class="app-hello"></div>。

最佳实践：元素选择器统一以app-为前缀（Angular 默认约定），避免与原生 HTML 标签冲突。

2. template/templateUrl：组件的视图模板

template：内联模板，适合简单的视图（如示例中的单行 HTML），使用反引号`支持多行；

templateUrl：外部模板路径，适合复杂视图，示例：

@Component({ selector: 'app-hello', templateUrl: './hello.component.html', // 指向外部HTML文件 styles: [`h1 { color: #1677ff; }`] })

模板中可使用 Angular 的模板语法（如插值表达式{{ }}、指令、绑定等），实现数据与视图的联动。

3. styles/styleUrls：组件的样式

styles：内联样式，数组形式，支持多行样式；

styleUrls：外部样式文件路径，数组形式（可引入多个样式文件），示例：

@Component({ selector: 'app-hello', templateUrl: './hello.component.html', styleUrls: ['./hello.component.css', './hello.component.scss'] })

关键特性：Angular 组件样式默认是 “封装” 的（通过 ViewEncapsulation），即样式仅作用于当前组件，不会污染全局或其他组件。

4. 其他常用配置

standalone：Angular 14 + 新增，标记组件是否为 “独立组件”（无需在 NgModule 中声明），默认false；
imports：独立组件专用，声明组件依赖的其他独立组件、指令、管道；
providers：组件级别的依赖注入提供者，仅在当前组件及其子组件生效。

三、组件的创建：两种方式（手动 / CLI）

1. 手动创建（了解底层）

步骤 1：在src/app下新建文件夹hello，创建hello.component.ts；步骤 2：编写组件类（如上文的 HelloComponent）；步骤 3（可选）：创建hello.component.html和hello.component.css，并修改@Component的templateUrl和styleUrls。

2. CLI 创建（推荐，高效）

Angular CLI 提供了generate component（简写g c）命令，一键生成组件文件（ts/html/css/spec.ts），并自动配置（若非独立组件，会自动在根模块 AppModule 的declarations中声明）。

# 创建常规组件（非独立），生成到src/app/hello目录 ng g c hello # 创建独立组件（Angular 14+） ng g c hello --standalone true

生成的文件结构：

hello/ ├── hello.component.ts # 组件类 ├── hello.component.html # 模板 ├── hello.component.css # 样式 └── hello.component.spec.ts # 测试文件

四、组件的注册：NgModule vs 独立组件

Angular 组件的 “注册” 本质是让 Angular 识别并允许使用该组件，分两种场景：

1. 非独立组件：在 NgModule 中声明

非独立组件必须在NgModule的declarations数组中声明，否则 Angular 会报错。

示例：根模块app.module.ts中声明 HelloComponent

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; // 导入组件 import { HelloComponent } from './hello/hello.component'; @NgModule({ declarations: [ AppComponent, HelloComponent // 声明组件 ], imports: [BrowserModule], providers: [], bootstrap: [AppComponent] // 根组件，应用启动时渲染 }) export class AppModule { }

注意：一个组件只能在一个NgModule 中声明，重复声明会报错。

2. 独立组件：无需 NgModule，通过 imports 引入

独立组件（standalone: true）无需在 NgModule 中声明，使用时直接在其他组件的imports中引入即可。

示例：创建独立组件 HelloComponent

import { Component } from '@angular/core'; @Component({ selector: 'app-hello', templateUrl: './hello.component.html', styleUrls: ['./hello.component.css'], standalone: true // 标记为独立组件 }) export class HelloComponent { name = '独立组件'; }

在根组件 AppComponent（若 AppComponent 也是独立组件）中引入：

import { Component } from '@angular/core'; import { HelloComponent } from './hello/hello.component'; @Component({ selector: 'app-root', template: `<app-hello></app-hello>`, standalone: true, imports: [HelloComponent] // 引入独立组件 }) export class AppComponent { }

若根组件不是独立组件，可在根模块的imports中引入独立组件：

@NgModule({ declarations: [AppComponent], imports: [BrowserModule, HelloComponent], // 引入独立组件 bootstrap: [AppComponent] }) export class AppModule { }

五、组件的使用：在模板中调用

注册完成后，即可在其他组件的模板中通过selector调用组件，核心场景包括：

1. 基础使用

直接在模板中写入组件的 selector 标签即可：

<!-- app.component.html --> <div class="app-container"> <h2>根组件容器</h2> <!-- 调用HelloComponent --> <app-hello></app-hello> </div>

2. 传递数据（输入属性 @Input）

组件间通信最常用的方式：子组件通过@Input接收父组件传递的数据。

步骤 1：子组件 HelloComponent 定义输入属性

import { Component, Input } from '@angular/core'; @Component({ selector: 'app-hello', template: `<h1>Hello, {{ userName }}!</h1>` }) export class HelloComponent { // 定义输入属性，接收父组件传递的值 @Input() userName!: string; }

步骤 2：父组件模板中传递数据

<!-- app.component.html --> <!-- 静态传值 --> <app-hello userName="Angular开发者"></app-hello> <!-- 动态传值（绑定父组件的属性） --> <app-hello [userName]="parentUserName"></app-hello>

父组件类定义属性：

// app.component.ts export class AppComponent { parentUserName = '前端工程师'; }

3. 触发事件（输出属性 @Output）

子组件通过@Output发射事件，父组件监听并处理。

步骤 1：子组件定义输出属性

import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-hello', template: ` <h1>Hello, {{ userName }}!</h1> <button (click)="onClick()">点击发送事件</button> ` }) export class HelloComponent { @Input() userName!: string; // 定义输出属性，发射自定义事件 @Output() greet = new EventEmitter<string>(); onClick() { // 发射事件，携带数据 this.greet.emit(`来自${this.userName}的问候！`); } }

步骤 2：父组件监听事件

<!-- app.component.html --> <app-hello [userName]="parentUserName" (greet)="handleGreet($event)" ></app-hello>

父组件处理事件：

// app.component.ts export class AppComponent { parentUserName = '前端工程师'; handleGreet(message: string) { alert(message); // 弹出子组件传递的消息 } }

六、组件的生命周期（补充）

理解组件的生命周期能帮你更好地控制组件行为，Angular 组件从创建到销毁会触发一系列钩子函数，常用的有：

ngOnInit：组件初始化完成（输入属性已赋值），适合执行初始化逻辑；
ngOnChanges：输入属性值变化时触发；
ngOnDestroy：组件销毁前触发，适合清理资源（如取消订阅、定时器）。

示例：在 HelloComponent 中使用生命周期钩子

import { Component, Input, OnInit, OnDestroy } from '@angular/core'; @Component({ selector: 'app-hello', template: `<h1>Hello, {{ userName }}!</h1>` }) export class HelloComponent implements OnInit, OnDestroy { @Input() userName!: string; private timer!: any; ngOnInit() { // 组件初始化时启动定时器 this.timer = setInterval(() => { console.log('组件已初始化'); }, 1000); } ngOnDestroy() { // 组件销毁时清理定时器 clearInterval(this.timer); } }