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: '',
})
export class ButtonWithClickEventComponent {
@Output() buttonClick = new EventEmitter();
onClick(): void {
this.buttonClick.emit();
}
}
在此示例中，buttonClick 是输出属性，onClick() 方法用于触发该事件。
使用该组件的父组件，需要在模板中监听 buttonClick 事件：
之后在父组件中实现 onButtonClick() 方法即可响应事件。
通过以上示例，你可以体会到 Angular 独立组件的核心思想：将应用程序拆分为小而独立的模块，每个模块各司其职，通过输入输出机制与外界协作。这种模块化设计使得代码更加清晰、易于维护。现在，你可以动手编写代码，开始构建属于自己的 Angular 独立组件了。
