Angular 组件教程

Angular 是一个由 Google 维护的开源前端框架，用于构建单页应用程序。在这个教程中，我们将学习如何创建和使用 Angular 组件。

基础概念

  1. 组件：Angular 中的基本构建块，用于创建可重用的 UI 部分。
  2. 模块：将相关的组件和功能组织在一起。
  3. 服务：提供数据和方法给组件使用。

创建组件

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

ng generate component my-component

这将创建一个名为 my-component 的新组件。

组件结构

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

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

交互式组件

一个交互式组件通常包含以下部分：

  • 模板：定义组件的 HTML 结构。
  • 类：包含组件的逻辑和数据。
  • 样式：定义组件的外观。

例子

以下是一个简单的 Angular 组件示例：

<!-- my-component.component.html -->
<h1>{{ title }}</h1>
<button (click)="increaseCount()">增加计数</button>
<p>计数：{{ count }}</p>

// my-component.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  title = '交互式组件';
  count = 0;

  increaseCount() {
    this.count++;
  }
}

/* my-component.component.css */
h1 {
  color: #333;
}

button {
  margin: 10px;
}

学习资源

要了解更多关于 Angular 组件的信息，请访问我们的Angular 教程页面。

Angular 图标