Angular独立组件从零开始入门教程

Angular 独立组件入门基础教程

对于正在学习 Angular 的开发者来说，独立组件（Component）一定不陌生。实际上，独立组件是指能够独立存在、自主管理的组件单元，既能嵌入到其他组件中，也能被其他组件直接引用。那么如何快速上手创建并使用这些独立组件呢？本文将手把手带你完成每一步。

Angular 组件创建方法

创建一个 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 输入属性后，模板中通过插值表达式 {{message}} 显示该数据。

在调用组件时，将消息作为属性赋值即可：

组件输出事件实现

除了接收外部数据，组件还可以向外发送交互信息——通过输出事件。定义输出事件需要使用 @Output() 和 EventEmitter。例如，组件中有一个按钮，点击时触发自定义事件：

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

在此示例中，buttonClick 是输出属性，onClick() 方法用于触发该事件。

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

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

通过以上示例，你可以体会到 Angular 独立组件的核心思想：将应用程序拆分为小而独立的模块，每个模块各司其职，通过输入输出机制与外界协作。这种模块化设计使得代码更加清晰、易于维护。现在，你可以动手编写代码，开始构建属于自己的 Angular 独立组件了。