Angular 组件：初学者综合指南

1. 什么是Angular 组件？

Angular 组件是定义应用程序 UI 的基本构建块。 它们由 HTML 模板、CSS 样式和 TypeScript 代码组成。每个组件都定义了一个类，其中包含数据和与之相关的逻辑，并将其与一个 HTML 模板相关联。

每个 Angular 应用程序都具有至少一个组件，这个组件称为根组件，它是层级结构的顶部。每个组件树中都有一个父组件和零个或多个子组件。

2. 创建Angular 组件

2.1 使用CLI创建组件

Angular CLI是一个快速创建组件的命令行工具。

ng generate component my-component

这个命令会在src/app目录下创建一个名为 my-component 的新目录，其中包含组件文件。

2.2 手动创建组件

您可以通过手动创建组件文件来创建组件。

创建一个名为my-component的组件文件夹。在文件夹中添加以下三个文件：

my-component.component.html - 组件的HTML模板

my-component.component.ts - 组件的TypeScript代码

my-component.component.css - 组件的CSS样式

my-component.component.ts 文件包含组件的代码，如下所示：

import { Component } from '@angular/core';
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  title = 'my-component';
}

在这个组件中，我们定义了一个名为 title 的属性，并将其值设置为 'my-component'。 您可以在 HTML 模板中访问这个属性。

3. 组件元数据

Angular 组件使用 @Component 装饰器定义元数据。 元数据是一些附加到类的信息，Angular 使用这些信息来实例化和操作组件。

@Component 装饰器中包含多个属性。

selector - 组件的选择器，用于在模板中标识组件

templateUrl - 组件使用的HTML模板的URL

styleUrls - 组件使用的CSS样式的URL列表

4. 组件生命周期钩子

Angular 组件具有生命周期，生命周期钩子为我们提供了执行特定任务的机会。这些钩子在组件生命周期的不同阶段被调用。

Angular 组件的生命周期钩子有：

ngOnInit() - 在组件被初始化后立即调用

ngOnChanges() - 当一个或多个组件输入属性的值发生变化时调用

ngOnDestroy() - 在组件被销毁之前调用

ngAfterViewInit() - 初始化视图之后调用

5. 组件输入属性

组件可以使用 @Input 装饰器来声明输入属性。 输入属性允许父组件在声明子组件的时候将数据传递给子组件。

在子组件中可以通过 @Input 装饰器来声明输入属性，如下所示：

import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  @Input() title = '';
}

在这个组件中，我们使用 @Input 装饰器定义了一个名为 title 的输入属性。 父组件可以在使用子组件时将数据通过这个属性传递给子组件。

6. 组件输出属性

组件可以使用 @Output 装饰器来声明输出属性。 输出属性允许子组件将数据传递给父组件。

在子组件中可以使用 EventEmitter 来声明输出属性，如下所示：

import { Component, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  @Output() message = new EventEmitter();
  sendMessage() {
    this.message.emit('Hello from child component!');
  }
}

在这个组件中，我们使用 @Output 装饰器定义了一个名为 message 的输出属性，该属性是一个 EventEmitter。 子组件可以使用该事件来将数据传递给父组件。

在子组件的方法中，我们调用 message.emit() 将数据发射出去。

7. 总结

Angular 组件是 Angular 应用程序的基本构建块。组件是可复用的，并且具有许多有用的功能，如生命周期钩子、输入属性和输出属性。