Angular 中的 component 是什么?

Question

Accepted Answer

**component** 是 Angular UI 的基本构建块——一个用 `@Component` 装饰器装饰的 TypeScript **class**，用于控制屏幕的一个部分（它的"view"）。每个 Angular 应用都是一个 components 树。 ## 组件的构成 ```ts import { Component } from "@angular/core"; @Component({ selector: "app-user-card", // the custom HTML tag: templateUrl: "./user-card.html", // the view (or inline `template: '...'`) styleUrls: ["./user-card.css"], // scoped styles for this component }) export class UserCardComponent { name = "Ann"; // properties → available in the template greet() { return `Hi ${this.name}`; } // methods → callable from the template } ``` `@Component` 装饰器将三件事联系在一起：**selector**（你在 HTML 中如何使用它）、**template**（标记）和 **styles**（作用范围限于该组件）。 ## 类包含逻辑和数据 ```html

``` 类的公共属性和方法可以通过绑定直接在其 template 中访问——这是 Angular 连接数据和视图的核心方式。 ## 使用一个组件 ```html ``` ## 样式默认被封装 ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` Angular 自动限定组件样式的作用范围（View Encapsulation），因此 CSS 不会在组件之间泄漏。 ## 为什么这很重要 Components 是构建每个 Angular 应用的方式——模板 + 逻辑 + 作用范围限制的样式的自包含单元，组合成一棵树。理解 `@Component` 装饰器（selector、template、styles）以及类的属性/方法如何与 template 绑定是 Angular 开发的绝对基础；其他一切都建立在组件模型之上。