angular/guide/components

Angular 组件指南

Angular 是一个用于构建高性能、可维护的 Web 应用程序的开源框架。组件是 Angular 中的核心概念之一，它们是构成应用程序的基本构建块。

组件是什么？

组件是 Angular 的最小可复用单元，它封装了逻辑和视图。每个组件都有自己的模板、样式和代码。

创建组件

要在 Angular 中创建一个组件，你可以使用 Angular CLI：

ng generate component my-component

这将在你的项目中创建一个新的组件文件。

组件结构

一个 Angular 组件通常包含以下文件：

my-component.component.html：组件的 HTML 模板。
my-component.component.ts：组件的逻辑代码。
my-component.component.css：组件的样式。

组件模板

组件模板定义了组件的 UI。你可以使用 HTML 和 Angular 模板语法来编写模板。

<h1>Welcome to My Component</h1>
<p>This is some content from the component.</p>

组件样式

组件样式定义了组件的外观。你可以使用 CSS 来编写样式。

h1 {
  color: #333;
}

组件交互

组件可以通过事件发射（Event Emission）与其他组件进行交互。

export class MyComponent {
  constructor() {
    this.myEvent = new EventEmitter<string>();
  }

  emitMyEvent(message: string) {
    this.myEvent.emit(message);
  }
}

资源链接

想要了解更多关于 Angular 组件的信息，请访问我们的 Angular 组件文档。