Angular7-组件

什么是组件化架构

组件化架构是一种将软件系统拆分为独立、可重用和互相依赖的部件的架构设计方法。每个部件被称为组件。组件开发人员可以在不影响其他组件的情况下独立工作，并在系统中复用这些组件。 Angular 框架是一个基于组件化架构的前端框架。

Angular组件介绍

Angular 组件是视图、代码和样式的自包含的独立部件，它把相似的视图、逻辑和结构组合成了一个单独的组件。每个组件对其他组件完全隔离，但它们之间仍然可以通过输入和输出进行通信。组件的目的是促进重用和封装性。

创建一个Angular组件

要创建一个Angular组件，请先使用Angular CLI 安装最新版本的 Angular CLI ：

$ npm install -g @angular/cli

然后，使用以下命令在项目中生成一个新组件：

$ ng generate component my-component

这将在 src/app/my-component/ 目录中创建四个文件：

• my-component.component.ts：组件的 TypeScript 代码。
• my-component.component.html：组件的 HTML 模板。
• my-component.component.scss：组件的样式表。
• my-component.component.spec.ts：组件的单元测试代码。

Angular组件元素

组件由以下元素组成：

• 模板：组件的 HTML 模板。
• 类：组件的 TypeScript 代码。
• 元数据：组件的装饰器（@Component）及其属性。

模板

每个组件都有一个 HTML 模板文件，用于定义组件的视图结构。 模板中包含静态 HTML 元素以及 Angular 模板语法。通过使用这些语法，开发人员可以将逻辑和样式动态添加到视图。

类

组件的类定义了组件的行为和逻辑。其中最重要的方法是 ngOnInit ，它在组件初始化完成后被调用。其他关键方法包括 ngOnChanges 、 ngOnDestroy 和 ngDoCheck 。

元数据

元数据是组件的装饰器，用于描述组件的属性和其他特征。Angular 组件有一个专用装饰器（@Component）用于将类标记为组件，并指定模板和样式文件。

以下是一个使用Angular组件的示例：

import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})
export class MyComponent {
  title = 'Hello World';
}

Angular组件的输入和输出

组件之间可以通过输入（Input）和输出（Output）进行通信。输入允许组件接收在组件之外的数据，输出允许组件向外部发送数据。在组件中，输入和输出是通过属性和事件绑定实现的。

输入

使用输入装饰器（@Input）可以定义输入属性，例如：

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

@Component({
  selector: 'my-child-component',
  templateUrl: './my-child-component.component.html',
  styleUrls: ['./my-child-component.component.scss']
})
export class MyChildComponent {
  @Input() title: string;
}

在另一个组件中，可以使用属性绑定的方式将值传递给子组件。

<my-child-component [title]="myTitle"></my-child-component>

输出

使用输出装饰器（@Output）可以定义输出事件，例如：

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

@Component({
  selector: 'my-child-component',
  templateUrl: './my-child-component.component.html',
  styleUrls: ['./my-child-component.component.scss']
})
export class MyChildComponent {
  @Output() itemClicked = new EventEmitter<string>();

  onItemClick(item: string) {
    this.itemClicked.emit(item);
  }
}

在另一个组件中，可以使用事件绑定的方式监听子组件的输出事件。

<my-child-component (itemClicked)="onItemClicked($event)"></my-child-component>

Angular组件的生命周期

Angular 组件有一组生命周期钩子，这些钩子允许开发人员在组件生命周期的关键时刻插入自定义行为。这些生命周期钩子包括 ngOnInit 、 ngOnChanges 、 ngDoCheck 、 ngOnDestroy 等。

以下是组件生命周期中的一些重要事件：

• ngOnChanges ：组件中的输入属性被改变时触发。
• ngOnInit ：组件初始化后触发。
• ngDoCheck ：组件中的变更检测完成后触发。
• ngOnDestroy ：组件被销毁时触发。

总结

Angular组件是将代码组织成模块的非常有用的工具。使用组件，我们可以将视图、数据和逻辑组合在一起，使应用更加模块化和可维护。组件还可以实现数据和事件的传递，以及在生命周期的关键时刻执行自定义代码。