【Angular】组件（Component）

cangloe

于 2024-11-27 02:18:57 发布

阅读量1k

点赞数 22

分类专栏： angular 文章标签： angular.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/u013675821/article/details/144071916

版权

angular 专栏收录该内容

14 篇文章

订阅专栏

在 Angular 中，组件（Component） 是构建用户界面的基本单位。每个 Angular 应用通常由多个组件组成，组件负责显示视图、处理用户交互以及管理应用逻辑。组件不仅包含 HTML 模板、CSS 样式，还包含 TypeScript 代码，它们一起构成了 Angular 应用的基本模块。

组件的基本结构

每个组件由以下几个部分组成：

TypeScript 文件 (.ts)：定义组件的类和逻辑。
HTML 模板文件 (.html)：定义组件的视图部分。
CSS 文件 (.css 或 .scss 等)：定义组件的样式。
组件装饰器（@Component）：标注组件类，告诉 Angular 这是一个组件，并提供有关该组件的元数据。

创建组件

在 Angular 中，你可以使用 Angular CLI 来生成组件：

ng generate component component-name

# 简写
ng g c component-name

这会在 src/app 目录下生成一个新的组件文件夹，包含以下内容：

component-name.component.ts：组件的 TypeScript 类文件。
component-name.component.html：组件的 HTML 模板文件。
component-name.component.css：组件的 CSS 样式文件。
component-name.component.spec.ts：组件的单元测试文件。

组件的结构和代码示例

1. 组件类（TypeScript 文件）

每个组件类定义了该组件的逻辑，通常包括：

组件的输入（Input）和输出（Output）
组件的生命周期钩子
数据绑定逻辑

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

@Component({
  selector: 'app-my-component',  // 组件的标签名，用于在 HTML 中引用
  templateUrl: './my-component.component.html',  // 组件的模板文件
  styleUrls: ['./my-component.component.css']  // 组件的样式文件
})
export class MyComponent {
  title: string = 'Hello, Angular!';

  // 组件的方法
  changeTitle() {
    this.title = 'Title changed!';
  }
}

@Component 装饰器

：用于标注类为 Angular 组件，并提供组件的元数据。
- selector：定义组件的 HTML 标签（例如 <app-my-component></app-my-component>）。
- templateUrl：指向组件的 HTML 模板文件。
- styleUrls：指向组件的样式文件。

2. 模板文件（HTML 文件）

模板文件定义了该组件的视图部分，它包含 HTML 代码，并支持 Angular 特有的模板语法，如数据绑定、指令等。

<div>
  <h1>{{ title }}</h1>
  <button (click)="changeTitle()">Change Title</button>
</div>

数据绑定：使用 {{ title }} 实现数据绑定，将组件的 title 属性绑定到视图中。
事件绑定：使用 (click) 来处理点击事件，调用 changeTitle() 方法。

3. 样式文件（CSS 或 SCSS 文件）

每个组件都可以拥有自己的样式，这些样式仅对该组件生效（视为封闭样式）。这使得样式更加模块化和可维护。

h1 {
  color: blue;
}

button {
  background-color: lightblue;
}

组件的输入与输出（Input 和 Output）

组件的输入和输出使得组件之间能够共享数据和事件。

1. 输入（@Input）

@Input 装饰器允许父组件向子组件传递数据。

// 子组件 (child.component.ts)
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<p>{{ message }}</p>`
})
export class ChildComponent {
  @Input() message: string;  // 接收来自父组件的数据
}

父组件传递数据给子组件：

<!-- 父组件 (parent.component.html) -->
<app-child [message]="parentMessage"></app-child>
// 父组件 (parent.component.ts)
export class ParentComponent {
  parentMessage = 'Hello from Parent!';
}

2. 输出（@Output）

@Output 装饰器允许子组件向父组件发送事件。

// 子组件 (child.component.ts)
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<button (click)="sendMessage()">Send Message</button>`
})
export class ChildComponent {
  @Output() messageEvent = new EventEmitter<string>();

  sendMessage() {
    this.messageEvent.emit('Hello from Child!');
  }
}

父组件接收子组件的事件：

<!-- 父组件 (parent.component.html) -->
<app-child (messageEvent)="receiveMessage($event)"></app-child>
<p>{{ message }}</p>
// 父组件 (parent.component.ts)
export class ParentComponent {
  message: string;

  receiveMessage($event: string) {
    this.message = $event;
  }
}

组件生命周期钩子

Angular 组件有一系列的生命周期钩子，用于在组件的不同阶段执行代码。这些钩子方法在组件的生命周期中自动被调用。

常用的生命周期钩子包括：

ngOnInit()：组件初始化时调用，通常用于获取数据。
ngOnChanges()：当组件输入属性发生变化时调用。
ngOnDestroy()：组件销毁时调用，用于清理资源。

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

@Component({
  selector: 'app-lifecycle',
  template: `<p>Lifecycle hooks example</p>`
})
export class LifecycleComponent implements OnInit, OnDestroy {

  ngOnInit() {
    console.log('ngOnInit: Component initialized!');
  }

  ngOnDestroy() {
    console.log('ngOnDestroy: Component destroyed!');
  }
}