Angular Academy · 课时

创建独立组件

Q: 「创建独立组件」这节课中我会学到什么？

使用 standalone 标志声明组件。 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 standalone 标志声明组件。

创建独立组件 是 CoddyKit 上的免费 Angular Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

创建独立组件

独立组件其实就是一个使用 @Component 装饰并标记为独立的 class。在 Angular v19 及更高版本中，独立模式是默认设置，因此通常甚至不需要写出该标志。

standalone 标志

过去，您需要在装饰器中设置 standalone: true。在 v19 及更高版本中，组件默认是独立组件，因此该标志是可选的。

import { Component } from '@angular/core';

@Component({
  selector: 'app-greeting',
  standalone: true, // optional in v19+
  template: '<h1>Welcome</h1>'
})
export class GreetingComponent {}

选择器

selector 是用于将组件放置到模板中的自定义元素标签，例如 app-greeting。

// usage in another template:
// <app-greeting></app-greeting>

内联模板

对于内联 HTML，请使用 template 属性，这非常适合小型组件。

@Component({
  selector: 'app-badge',
  template: '<span class="badge">New</span>'
})
export class BadgeComponent {}

外部模板

对于较大的视图，请使用 templateUrl 指向 HTML 文件。

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html'
})
export class ProfileComponent {}

样式

使用 styles（内联）或 styleUrl / styleUrls（外部文件）添加组件作用域内的样式。

@Component({
  selector: 'app-card',
  template: '<div class="card"></div>',
  styles: ['.card { padding: 16px; }']
})
export class CardComponent {}

组件 class 逻辑

class 主体包含状态和行为。使用 Signals 时，请将响应式状态声明为字段。

import { Component, signal } from '@angular/core';

@Component({ selector: 'app-counter', template: '<p>{{ n() }}</p>' })
export class CounterComponent {
  n = signal(0);
}

无需模块

请注意，这里没有 @NgModule，也没有 declarations 数组。组件已经可以在任何需要它的地方导入。

文件命名约定

Angular 的约定是将文件命名为 greeting.component.ts，将 class 命名为 GreetingComponent，并将选择器命名为 app-greeting。

在另一个组件中使用组件

要使用子独立组件，请将其导入父组件的 imports 数组中（下一课会介绍），然后将其选择器放入父组件模板。

使用 CLI 生成

Angular CLI 默认生成独立组件。运行 ng generate component greeting 会为您创建一个独立的 GreetingComponent 骨架。

快速检查：创建组件

关于独立组件的默认设置。

回顾：创建独立组件

您可以使用 @Component 创建独立组件，也可以选择设置 standalone: true（v19 及更高版本中的默认值）。您需要定义选择器、template 或 templateUrl、可选的样式以及 class 逻辑。不需要 NgModule。接下来：直接导入依赖。

常见问题解答

「创建独立组件」课时是免费的吗？

是的 — 「创建独立组件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「创建独立组件」这节课中我会学到什么？

使用 standalone 标志声明组件。你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「创建独立组件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy