当前位置：首页 > news >正文

Angular 组件介绍及使用（一）

news 2026/2/10 12:11:34

Angular 概述

Angular 是一个用于构建 Web 应用程序的开源前端框架，由 Google 团队开发和维护。它采用 TypeScript 编程语言，并借鉴了一些传统的 Web 开发模式和最佳实践，提供了强大而灵活的工具和特性。

以下是 Angular 的一些概述要点：

组件化架构：Angular 以组件为核心，通过组件构建可重用、模块化的用户界面。每个组件由模板、样式和组件类组成，并且具有独立的功能和数据。
声明式模板：Angular 的模板语法基于 HTML，并且支持插值绑定、指令、管道等特性。这使得开发者可以以声明式方式定义和操作应用程序的视图。
双向数据绑定：Angular 的双向数据绑定机制可以实时更新模型和视图之间的数据变化。当模型发生变化时，视图会自动更新；反之亦然。
依赖注入：Angular 内置了强大的依赖注入机制，它可以帮助开发者解耦和管理组件之间的依赖关系。通过注入器（Injector），开发者可以轻松地创建和使用服务、组件和其他依赖项。
强大的工具集：Angular 提供了一整套工具和特性，用于帮助开发者提高生产效率和开发质量。其中包括自动化的测试工具、静态类型检查、命令行工具（Angular CLI）等。
跨平台开发：Angular 不仅可以用于构建 Web 应用程序，还可以用于构建移动应用程序和桌面应用程序。通过框架如 Ionic 和 Electron，开发者可以使用 Angular 来构建跨平台的应用程序。
社区支持和生态系统：Angular 拥有庞大的开发者社区和丰富的生态系统。开发者可以通过官方文档、教程、博客和论坛等资源获取支持，并分享自己的经验和知识。

Angular 与 VUE的区别

Angular 和 Vue 都是现代的前端框架，用于开发 Web 应用程序。

Angular 是由 Google 开发和维护的框架，采用 TypeScript 语言编写。它拥有完整的开发体系，能够提供强大的功能和高度可扩展性，适用于大型企业级应用和复杂的单页应用程序。Angular 的学习曲线相对较陡，需要掌握一定的 TypeScript 知识和 Angular 的核心概念。

Vue 是一个由尤雨溪开发和维护的轻量级框架，采用 JavaScript 编写。它拥有创新的响应式数据绑定和易于使用的 API，能够快速构建小型到中型的 Web 应用程序。Vue 具有比较平缓的学习曲线，不需要过多的配置和学习成本。

Angular 组件是 Angular 框架中的核心概念之一，用于构建用户界面。每个 Angular 组件由模板、样式和逻辑组成，它们一起工作以创建可重用的、模块化的用户界面。

Angular 搭建项目

创建 Angular 项目：
首先，你需要安装 Angular CLI（命令行界面），它是一个用于创建和管理 Angular 项目的工具集。打开终端（命令行界面），运行以下命令安装 Angular CLI：
```
npm install -g @angular/cli
```
创建一个新的 Angular 项目：
```
ng new my-app
```
注意，my-app 是你项目的名称，可以根据你实际的需求进行修改。
进入项目目录：
在终端中，通过以下命令进入刚刚创建的项目目录：
```
cd my-app
```
安装依赖：
在项目目录下，运行以下命令安装项目所需要的依赖：
```
npm install
```
此命令将自动从 package.json 文件中读取项目依赖，并进行安装。
导入 @angular/core 模块：
在你的 TypeScript 文件中，使用 import 关键字导入 @angular/core 模块。例如：
```
import { Component } from '@angular/core';
```
这样就可以在文件中使用 @angular/core 模块中的组件、指令等功能了。
创建 Angular 组件：
在你的项目中创建一个组件，可以使用 Angular CLI 提供的快捷命令 ng generate component，它会自动生成组件所需的文件。例如，运行以下命令生成一个名为 my-component 的组件：
```
ng generate component my-component
```
这会自动生成 my-component 组件所需的组件类、HTML 模板、CSS 样式等文件，并自动在适当的位置将组件注册到相关模块中。

如果你手动创建组件，请确保在组件类上添加合适的装饰器，并将组件类导出。例如：
```
import { Component } from '@angular/core';@Component({selector: 'app-my-component',templateUrl: './my-component.component.html',styleUrls: ['./my-component.component.css']
})export class MyComponentComponent {// 组件逻辑
}
```

在模块中引入组件：
在相关模块中（通常是根模块或其他特定功能模块），将组件导入，并将其添加到 declarations 数组中。例如，在根模块中（app.module.ts）：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';import { AppComponent } from './app.component';
import { MyComponentComponent } from './my-component/my-component.component'; // 导入组件@NgModule({declarations: [AppComponent,MyComponentComponent // 将组件添加到 declarations 数组],imports: [BrowserModule],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

通过将组件添加到 declarations 数组，Angular 知道它在应用程序中注册了这个组件，并可以在相关模板中使用它。

启动应用程序：
使用以下命令启动 Angular 项目：
```
ng serve
```
它会启动开发服务器，并在浏览器中运行你的应用程序。通过访问 http://localhost:4200，你将能够看到你的应用程序在浏览器中运行。

Angular组件介绍

组件类 (Component Class)

用于定义组件的行为和属性。它通常使用装饰器 @Component 来进行装饰，并包含与组件相关的逻辑和数据。

import { Component } from '@angular/core';@Component({selector: 'app-example',template: `<h1>Hello Angular!</h1><p>{{ message }}</p>`,styleUrls: ['./example.component.css']
})
export class ExampleComponent {message = 'Welcome to Angular!';
}

模板 (Template)

定义了组件的 HTML 结构和布局，用于描述如何渲染组件的视图。使用 Angular 的模板语法进行插值绑定、指令和其他逻辑操作。

<h1>Hello Angular!</h1>
<p>{{ message }}</p>
样式 (Style)：用于定义组件的外观和样式，可以是内联样式、内部样式或外部样式文件。
h1 {color: blue;
}p {font-size: 14px;
}

元数据装饰器 (Metadata Decorator)

使用装饰器来修饰组件类，并提供一些元数据信息。常用的装饰器包括 @Component、@Input、@Output 等，它们用于配置组件的各个方面，如选择器、模板、样式等。

import { Component, Input } from '@angular/core';@Component({selector: 'app-example',template: '<h1>Hello Angular!</h1>',
})
export class ExampleComponent {@Input() name: string;// ...
}

输入属性 (Input Property)

用于将父组件的数据传递给子组件。通过 @Input 装饰器来定义输入属性，并通过组件的标签属性进行传递。
<app-example [name]="userName"></app-example>
输出属性 (Output Property)：用于从子组件向父组件发送消息或数据。通过 @Output 装饰器和 EventEmitter 来定义输出属性，并通过事件绑定来响应子组件的行为。

import { Component, Output, EventEmitter } from '@angular/core';@Component({selector: 'app-example',template: '<button (click)="onButtonClick()">Click Me</button>',
})
export class ExampleComponent {@Output() buttonClick = new EventEmitter();onButtonClick() {this.buttonClick.emit();}
}

Angular 简单组件示例代码

组件是 Angular 应用程序的基本构建块，负责呈现用户界面和处理用户交互。在示例代码中，我们定义了一个名为 AppComponent 的组件。

import { Component } from '@angular/core';@Component({selector: 'app-root',template: `<h1>{{ title }}</h1><button (click)="changeTitle()">Change Title</button>`,styleUrls: ['./app.component.css']
})
export class AppComponent {title = 'My Angular App';changeTitle(): void {this.title = 'New Title';}
}

在上述代码中，@Component 装饰器用于给组件类 AppComponent 添加元数据。selector 字段指定了组件的选择器，这决定了如何在 HTML 中引用这个组件。在这个示例中，选择器为 app-root，表示我们可以在 HTML 中使用 <app-root></app-root> 标签来渲染这个组件。

template 字段指定了组件的模板，它使用了 Angular 的模板语法。在模板中，我们使用双花括号 {{ }} 进行插值绑定，将组件的 title 属性显示在 <h1> 标题元素中。我们还在模板中放置了一个按钮，当点击按钮时会调用组件中的 changeTitle() 方法。

styleUrls 字段是一个指向样式文件的路径数组，用于为组件应用样式。在这个示例中，我们将样式文件 app.component.css 与组件关联起来。

AppComponent 类是组件的实际实现。在这个类中，我们定义了一个名为 title 的属性，并初始化为 'My Angular App'。changeTitle() 方法用于在按钮点击时更改 title 的值，将其设置为 'New Title'。

接下来，我们需要创建一个根组件，并将其添加到应用程序中。

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';@NgModule({imports: [BrowserModule],declarations: [AppComponent],bootstrap: [AppComponent]
})
export class AppModule { }platformBrowserDynamic().bootstrapModule(AppModule);

在上述代码中，我们首先引入了一些必要的模块和组件。然后，我们创建了一个名为 AppModule 的根模块，并使用 @NgModule 装饰器来定义该模块。

imports 数组中导入了 BrowserModule 模块，该模块提供了运行在浏览器中的应用程序所需的一些关键功能。

declarations 数组中声明了根组件 AppComponent。

在 bootstrap 数组中，我们指定了根组件 AppComponent，意味着该组件将作为应用程序的入口点。

最后，我们使用 platformBrowserDynamic().bootstrapModule(AppModule); 来启动应用程序，将根模块 AppModule 作为参数传递给 bootstrapModule 函数。

刚刚接触Angular，总结理论知识和简单例子，希望能帮助后来学习Angular的人。

大鹏一日同风起扶摇直上九万里

诸位加油

END