Angular组件

Angular组件是Angular框架中的核心概念之一，是实现Web应用程序的基本构建块。

什么是组件

组件是具有指定功能的视图类。它由视图（HTML模板）、样式和控制器（TypeScript类）组成。组件是Angular应用程序的基本构建块，用于将UI拆分为独立、可重用的部件，使应用程序更易于管理和扩展。

在Angular中，组件用于组合和管理视图和视图逻辑，将业务逻辑与用户界面分离。

组件的特点

• 组件由Angular框架自动管理
• 组件可以像HTML标签一样使用，更加便于复用和管理
• 组件具有自己的生命周期钩子函数，使得我们可以在组件声明周期的不同阶段进行操作
• 组件是Angular框架的基本构建块之一，易于扩展和维护

组件的创建

创建组件的方式有两种，一种是使用Angular命令行工具（Angular CLI），另一种是手动创建。下面是使用Angular CLI创建组件的步骤：

打开终端，进入应用程序的根目录，执行以下命令：

ng generate component my-component

这将在当前目录的src/app下创建一个名为my-component的组件。执行完毕后，可以看到如下文件：

my-component/
|- my-component.component.ts
|- my-component.component.html
|- my-component.component.css
|- my-component.component.spec.ts

其中，my-component.component.ts是组件的控制器，my-component.component.html是组件的视图，my-component.component.css是组件的样式，my-component.component.spec.ts是组件的测试脚本。

组件的使用

在组件的HTML模板中，我们可以使用它所属的控制器中定义的属性和方法，同时也可以通过@Input和@Output装饰器来与父组件进行通讯。

下面是一个简单的组件示例，展示了如何通过@Input和@Output来实现父子组件之间的通讯：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <h1>Child Component</h1>
    <p>My name is {{ name }}</p>
    <button (click)="onClick()">Click me</button>
  `
})
export class ChildComponent {
  @Input() name: string;
  @Output() clickEvent = new EventEmitter<void>();

  onClick(): void {
    this.clickEvent.emit();
  }
}

@Component({
  selector: 'app-parent',
  template: `
    <h1>Parent Component</h1>
    <app-child [name]="name" (clickEvent)="onChildClick()"></app-child>
  `
})
export class ParentComponent {
  name = 'John';

  onChildClick(): void {
    alert('Button clicked in child component!');
  }
}

在上面的代码中，ChildComponent作为子组件，通过@Input装饰器接收父组件传递的name属性，并通过@Output装饰器暴露了一个事件clickEvent，该事件在按钮点击时触发。

ParentComponent作为父组件，将name属性传递给ChildComponent，并监听了ChildComponent的clickEvent事件，在该事件被触发时弹出一个提示框。

总结

Angular组件是Angular应用程序的基本构建块之一，用于将UI拆分为独立、可重用的部件。组件具有自己的视图、样式和控制器，并可以通过@Input和@Output装饰器与父组件进行通讯。组件用于将业务逻辑与用户界面分离，使得应用程序更易于管理和扩展。