2.2组件 (Components)

2.2组件 (Components)

2.2 组件 (Components)

在 Angular 中，组件 (Components) 是构建用户界面的基本单元。它们是可重用的、独立的模块，负责管理应用的一部分视图和逻辑。 组件将模板 (HTML)、样式 (CSS) 和逻辑 (TypeScript) 封装在一起，形成一个独立的单元，从而简化了应用的开发和维护。

2.2.1 组件的构成

一个 Angular 组件主要由以下三个部分组成：

• 模板 (Template): 定义了组件的 HTML 结构，也就是用户在屏幕上看到的内容。 模板可以使用 Angular 的模板语法来绑定数据、处理事件和控制视图的显示。

• 类 (Class): 包含了组件的逻辑和数据。 类定义了组件的行为，例如响应用户交互、获取数据和更新视图。

• 元数据 (Metadata): 通过 @Component 装饰器提供关于组件的信息，例如模板的路径、选择器和样式。 元数据告诉 Angular 如何创建和使用组件。

可以用以下图来表示：

2.2.2 创建组件

可以使用 Angular CLI 命令 ng generate component <component-name> 来快速创建一个新的组件。 例如，要创建一个名为 my-component 的组件，可以运行以下命令：

ng generate component my-component
​

这个命令会在 src/app 目录下创建一个名为 my-component 的文件夹，并在其中生成以下文件：

• my-component.component.ts: 组件的类文件，包含组件的逻辑和数据。

• my-component.component.html: 组件的模板文件，定义组件的 HTML 结构。

• my-component.component.css: 组件的样式文件，定义组件的 CSS 样式。

• my-component.component.spec.ts: 组件的测试文件，用于测试组件的功能。

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 MyComponentComponent {
  message: string = 'Hello from My Component!';
  handleClick() {
    this.message = 'Button Clicked!';
  }
}
​

my-component.component.html 示例:

<p>{{ message }}</p>
<button (click)="handleClick()">Click Me</button>
​

my-component.component.css 示例:

p {
  color: blue;
}
​

2.2.3 组件选择器 (Selector)

组件选择器是一个 CSS 选择器，用于在 HTML 中引用组件。 在上面的例子中，组件的选择器是 app-my-component。 这意味着可以在 HTML 中使用 <app-my-component> 标签来使用该组件。

例如，在 app.component.html 中使用 my-component:

<h1>Welcome to My App!</h1>
<app-my-component></app-my-component>
​

2.2.4 数据绑定 (Data Binding)

Angular 提供了多种数据绑定方式，用于在组件的模板和类之间传递数据。

• 插值 (Interpolation): 使用双花括号 {{ }} 将组件类中的数据绑定到模板中。 例如，{{ message }} 将组件类中的 message 属性的值显示在模板中。

• 属性绑定 (Property Binding): 使用方括号 [] 将组件类中的属性绑定到 HTML 元素的属性。 例如，<img [src]="imageUrl"> 将组件类中的 imageUrl 属性的值绑定到 img 元素的 src 属性。

• 事件绑定 (Event Binding): 使用圆括号 () 将 HTML 元素的事件绑定到组件类中的方法。 例如，<button (click)="handleClick()">Click Me</button> 将 button 元素的 click 事件绑定到组件类中的 handleClick 方法。

• 双向绑定 (Two-way Binding): 使用 [(ngModel)] 将 HTML 表单元素的值与组件类中的属性进行双向绑定。 这意味着当用户在表单元素中输入数据时，组件类中的属性的值会自动更新，反之亦然。 双向绑定需要导入 FormsModule。

数据绑定示例:

import { Component } from '@angular/core';
@Component({
  selector: 'app-data-binding',
  templateUrl: './data-binding.component.html',
  styleUrls: ['./data-binding.component.css']
})
export class DataBindingComponent {
  message: string = 'Initial Message';
  imageUrl: string = 'https://via.placeholder.com/150';
  inputValue: string = '';
  updateMessage() {
    this.message = 'Message updated via button!';
  }
}
​

<p>Interpolation: {{ message }}</p>
<img [src]="imageUrl" alt="Placeholder Image">
<button (click)="updateMessage()">Update Message</button>
<input type="text" [(ngModel)]="inputValue" placeholder="Enter text">
<p>Two-way Binding: {{ inputValue }}</p>
​

2.2.5 组件交互

组件之间可以相互交互，传递数据和触发事件。 Angular 提供了多种组件交互方式：

• 输入属性 (Input Properties): 允许父组件向子组件传递数据。 使用 @Input() 装饰器将组件类中的属性声明为输入属性。

• 输出属性 (Output Properties): 允许子组件向父组件传递数据。 使用 @Output() 装饰器将组件类中的属性声明为输出属性，并使用 EventEmitter 来触发事件。

• 服务 (Services): 允许组件之间共享数据和逻辑。 服务是单例的，可以在整个应用中使用。

父组件 (parent.component.ts):

import { Component } from '@angular/core';
@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  parentMessage: string = 'Message from Parent';
  childMessage: string = '';
  handleChildEvent(message: string) {
    this.childMessage = message;
  }
}
​

父组件模板 (parent.component.html):

<p>Parent Message: {{ parentMessage }}</p>
<app-child [message]="parentMessage" (childEvent)="handleChildEvent($event)"></app-child>
<p>Message from Child: {{ childMessage }}</p>
​

子组件 (child.component.ts):

import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Input() message: string = '';
  @Output() childEvent = new EventEmitter<string>();
  sendMessage() {
    this.childEvent.emit('Message from Child');
  }
}
​

子组件模板 (child.component.html):

<p>Child Component: {{ message }}</p>
<button (click)="sendMessage()">Send Message to Parent</button>
​

在这个例子中，父组件通过 [message]="parentMessage" 将 parentMessage 传递给子组件的 message 输入属性。 子组件通过 (childEvent)="handleChildEvent($event)" 将 childEvent 输出属性绑定到父组件的 handleChildEvent 方法。 当子组件调用 this.childEvent.emit('Message from Child') 时，父组件的 handleChildEvent 方法会被调用，并将子组件传递的消息作为参数。

2.2.6 组件生命周期

Angular 组件具有生命周期，生命周期钩子函数允许在组件的不同阶段执行代码。 常用的生命周期钩子函数包括：

• ngOnChanges: 当组件的输入属性的值发生变化时调用。

• ngOnInit: 在组件初始化完成后调用。

• ngDoCheck: 在 Angular 检测到组件的任何变化时调用。

• ngAfterContentInit: 在 Angular 将内容投影到组件中之后调用。

• ngAfterContentChecked: 在 Angular 检查完组件的内容之后调用。

• ngAfterViewInit: 在 Angular 初始化完组件的视图之后调用。

• ngAfterViewChecked: 在 Angular 检查完组件的视图之后调用。

• ngOnDestroy: 在 Angular 销毁组件之前调用。

生命周期示例:

import { Component, OnInit, OnDestroy, OnChanges, Input, SimpleChanges } from '@angular/core';
@Component({
  selector: 'app-lifecycle',
  templateUrl: './lifecycle.component.html',
  styleUrls: ['./lifecycle.component.css']
})
export class LifecycleComponent implements OnInit, OnDestroy, OnChanges {
  @Input() data: string = '';
  constructor() {
    console.log('Constructor called');
  }
  ngOnChanges(changes: SimpleChanges): void {
    console.log('ngOnChanges called', changes);
  }
  ngOnInit(): void {
    console.log('ngOnInit called');
  }
  ngOnDestroy(): void {
    console.log('ngOnDestroy called');
  }
}
​

在这个例子中，我们实现了 ngOnInit 和 ngOnDestroy 钩子函数，并在其中打印日志。 当组件被创建时，ngOnInit 会被调用。 当组件被销毁时，ngOnDestroy 会被调用。 ngOnChanges 会在输入属性 data 发生变化时被调用。

可以使用以下图来表示组件生命周期：

2.2.7 组件的元数据

@Component 装饰器用于定义组件的元数据。 常用的元数据属性包括：

• selector: 组件的选择器。

• templateUrl: 组件的模板文件的路径。

• template: 组件的模板字符串。

• styleUrls: 组件的样式文件的路径数组。

• styles: 组件的样式字符串数组。

• providers: 组件的服务提供商数组。

• encapsulation: 组件的视图封装模式。 可选值包括 ViewEncapsulation.Emulated (默认值), ViewEncapsulation.ShadowDom, 和 ViewEncapsulation.None。

元数据示例:

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
  selector: 'app-metadata',
  templateUrl: './metadata.component.html',
  styleUrls: ['./metadata.component.css'],
  encapsulation: ViewEncapsulation.Emulated // Or ShadowDom, or None
})
export class MetadataComponent {
  title: string = 'Metadata Example';
}
​

2.2.8 总结

组件是 Angular 应用的核心构建块。 了解组件的构成、创建方式、数据绑定、组件交互、生命周期和元数据对于开发 Angular 应用至关重要。 通过合理地使用组件，可以构建可重用、可维护和可测试的 Angular 应用。