首页 > 网页制作 >Angular独立组件入门教程

Angular独立组件入门教程

来源：互联网 2026-06-14 08:15:07

Angular独立组件可独立存在与管理，通过CLI命令创建，包含组件类、模板和样式。使用@Component装饰器定义选择器和模板，利用@Input接收数据，通过@Output和EventEmitter触发事件。组件化开发将应用拆分为独立单元，通过输入输出协作，提升代码清晰度和可维护性。

Angular 独立组件入门

在学习 Angular 时，独立组件（Component）是基础概念。它能够独立存在、独立管理，既可以嵌入到其他组件中，也可以被其他组件直接引用。本文介绍如何创建并使用独立组件。

创建组件

创建 Angular 组件，首先使用 Angular CLI 生成基本框架。假设要创建一个名为 hello-world 的组件，执行以下命令：

长期稳定更新的攒劲资源： >>>点此立即查看<<<

ng generate component hello-world

命令执行后会自动生成 hello-world 文件夹，包含组件类、HTML 模板和样式表等必需文件。

打开 hello-world.component.ts 文件，定义组件类。下面是最简示例：

import { Component } from '@angular/core';
@Component({
    selector: 'app-hello-world',
    template: 'Hello World!',
})
export class HelloWorldComponent {
}

这里使用 @Component 装饰器指定选择器（即组件的标签名），并确定 HTML 模板——输出一个“Hello World!”段落。

接着在 app.component.html 中使用该组件，添加标签：

打开应用，页面将显示“Hello World!”。

组件输入

使用组件时常需要传入数据，这依赖输入属性。要定义输入属性，在组件类中用 @Input() 装饰器标记某个属性。例如让消息内容由用户提供：

import { Component, Input } from '@angular/core';
@Component({
    selector: 'app-hello-world',
    template: '{{message}}',
})
export class HelloWorldComponent {
    @Input() message: string;
}

添加 message 输入属性后，模板中使用插值表达式显示其值。

使用组件时，将消息作为属性传入：

组件输出

除了接收数据，组件也可通过输出事件与外界交互。定义输出事件需使用 @Output() 和 EventEmitter。假设组件内有一个按钮，点击时触发事件：

import { Component, Output, EventEmitter } from '@angular/core';
@Component({
    selector: 'app-button-with-click-event',
    template: '',
})
export class ButtonWithClickEventComponent {
    @Output() buttonClick = new EventEmitter();
    onClick(): void {
        this.buttonClick.emit();
    }
}

这里 buttonClick 是输出属性，onClick() 方法触发事件。

使用该组件时，在父组件模板中监听 buttonClick 事件：

然后在父组件中实现 onButtonClick() 方法即可响应。

通过上述示例可见，独立组件的核心思路是将应用拆分为小而独立的单元，每个单元只处理自身逻辑，通过输入输出与外界协作。这种模块化方式使代码更清晰、更易于维护。现在可以动手构建属于自己的 Angular 独立组件了。

侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述