浅谈Angular中组件（@Component）基本知识

Angular中的@Component是一个装饰器，用于将类与HTML模板和CSS样式关联起来，创建可复用的组件。它接收元数据，如选择器、模板URL和样式URL，以定义组件的外观和行为。

Angular是一个用于构建Web应用程序的开源JavaScript框架，在Angular中，组件是构建应用程序的基本单位，本文将详细介绍Angular中的组件及其相关知识。

1. 什么是组件？

组件是Angular中的一个核心概念，它允许我们将UI划分为独立的、可重用的部件，每个组件都有一个对应的类，这个类负责处理与该组件相关的逻辑，组件可以包含HTML模板、CSS样式和TypeScript代码。

2. 创建组件

在Angular中，我们使用@Component装饰器来创建组件，以下是一个简单的组件示例：

import { Component } from '@angular/core';
@Component({
  selector: 'appexample',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  title = 'Hello, Angular!';
}

2.1 组件元数据

@Component装饰器接收一个对象作为参数，这个对象包含了组件的元数据，以下是一些常用的属性：

selector：定义了组件的选择器，用于在HTML中引用组件，例如<appexample>。

templateUrl：指定组件的HTML模板文件路径。

styleUrls：指定组件的CSS样式文件路径（可以是一个数组，表示多个样式文件）。

changeDetectionStrategy：设置组件的变化检测策略，可选值有default（默认）、OnPush等。

encapsulation：设置组件的样式封装方式，可选值有Emulated（模拟）、Native（原生）和None（无）。

3. 组件交互

组件之间可以通过输入（Input）和输出（Output）进行数据传递和事件通信。

3.1 输入（Input）

我们可以使用@Input()装饰器来定义组件的输入属性，这些属性可以在父组件中设置，并在子组件中访问。


import { Component, Input } from '@angular/core';
@Component({
  selector: 'appexample',
  template: <h1>{{ title }}</h1>
})
export class ExampleComponent {
  @Input() title: string;
}

3.2 输出（Output）

我们可以使用@Output()装饰器来定义组件的输出事件，这些事件可以在子组件中触发，并在父组件中监听。


import { Component, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'appexample',
  template: <button (click)="onClick()">Click me</button>
})
export class ExampleComponent {
  @Output() clickEvent = new EventEmitter<void>();
  onClick(): void {
    this.clickEvent.emit();
  }
}

4. 组件生命周期

Angular组件具有一系列生命周期钩子，我们可以在这些钩子中执行特定的操作，以下是一些常用的生命周期钩子：

ngOnInit()：在组件初始化时调用。