了解 Angular 组件的基本指南

DDD

发布时间：2024-11-08 17:00:32

475人浏览过

来源于dev.to

转载

了解 angular 组件的基本指南

angular 组件是 angular 应用程序的基础，提供了一种构建用户界面的模块化、可重用部分的方法。在本指南中，我们将介绍 angular 组件的基础知识，从结构到最佳实践。无论您是 angular 新手还是想复习一下，本文都将使您对 angular 中的组件有一个基本的了解。

什么是角度分量？

在 angular 中，组件是控制用户界面 (ui) 部分的类。想想按钮、选项卡、输入、表单和抽屉（实际上是 ui 的任何部分）。每个组件都是独立的，包括：

html 模板：定义 ui 的布局和结构。
css 样式：设置组件的外观和样式。
typescript 类：包含组件的逻辑和数据。
元数据：提供 angular 识别和使用组件的配置详细信息。

组件对于创建模块化应用程序至关重要，因为每个组件都可以代表页面的特定部分，例如标题、侧边栏或卡片。

角度组件的基本结构

angular 组件是使用 @component 装饰器定义的，它使用必要的模板、样式和选择器对其进行配置。这是一个基本示例：

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

@component({
  selector: 'app-example',
  templateurl: './example.component.html',
  styleurls: ['./example.component.css']
})
export class examplecomponent {
  title: string = 'hello, angular!';

  gettitle() {
    return this.title;
  }
}

在此示例中：

选择器是代表组件的 html 标签。
templateurl 指向 html 模板文件。
styleurls 指的是组件的 css 文件。
examplecomponent 类保存组件的数据和逻辑。

典型的组件文件夹结构

angular 项目通常将组件及其关联文件组织在一个文件夹中，该文件夹是使用 angular cli 时自动创建的。组件的典型文件夹结构包括：

example.component.ts：定义 typescript 类。
example.component.html：包含 html 模板。
example.component.css：保存组件样式。
example.component.spec.ts：包含组件的测试。

组件生命周期

angular 组件具有带有钩子的生命周期，允许开发人员在各个阶段执行操作。常用的生命周期钩子包括：

ngoninit：组件初始化后调用。
ngonchanges：当任何数据绑定属性更改时触发。
ngondestroy：在 angular 销毁组件之前调用。

例如，ngoninit 的使用方法如下：

import { component, oninit } from '@angular/core';

@component({
  selector: 'app-lifecycle',
  template: 'lifecycle example

							
								
								
									MediPro乡镇政府门户网站系统 5.1.0 UTF-8简体中文版
									MediPro乡镇政府门户网站系统，适合乡镇政府机构创建地方门户网站，用以宣传本地资源，实现政务公开，促进乡镇基层信息化建设。本系统基于PHP+MYSQL开发，预设了乡镇风采、党政机构、政务公开、投资指南、服务导航、文件下载、公众互动、领导信箱等乡镇政府门户网站常用的栏目和测试数据，采用适合乡镇政府门户网站的专用模版，增强了系统的针对性和易用性。除了文章系统、图文系统、下载系统、社区交流、反馈表单
								
								下载 
							
						',
})
export class lifecyclecomponent implements oninit {
  ngoninit() {
    console.log('component initialized!');
  }
}

生命周期挂钩提供了灵活性，可以轻松管理组件生命周期特定阶段的逻辑。

组件之间的通信

在现实应用程序中，组件通常需要相互交互以共享数据或触发操作。 angular 提供了几种组件通信的方法：

1. @输入和@输出

@input：允许父组件向子组件传递数据。
@output：使子组件能够向其父组件发送事件。

示例：

// child.component.ts
import { component, input, output, eventemitter } from '@angular/core';

@component({
  selector: 'app-child',
  template: ``,
})
export class childcomponent {
  @input() childmessage: string;
  @output() messageevent = new eventemitter();

  sendmessage() {
    this.messageevent.emit('message from child!');
  }
}

2.基于服务的通信

当组件不存在父子关系时，angular 服务提供了一种共享数据和逻辑的简单方法。默认情况下，服务是单例的，这意味着应用程序中仅存在一个实例。

import { injectable } from '@angular/core';
import { behaviorsubject } from 'rxjs';

@injectable({
  providedin: 'root'
})
export class sharedservice {
  private messagesource = new behaviorsubject('default message');
  currentmessage = this.messagesource.asobservable();

  changemessage(message: string) {
    this.messagesource.next(message);
  }
}

在不同组件中使用服务：

// component-one.ts
import { component } from '@angular/core';
import { sharedservice } from '../shared.service';

@component({
  selector: 'app-component-one',
  template: ``,
})
export class componentone {
  constructor(private sharedservice: sharedservice) {}

  changemessage() {
    this.sharedservice.changemessage('hello from component one');
  }
}

// component-two.ts
import { Component, OnInit } from '@angular/core';
import { SharedService } from '../shared.service';

@Component({
  selector: 'app-component-two',
  template: `{{ message }}`,
})
export class ComponentTwo implements OnInit {
  message: string;

  constructor(private sharedService: SharedService) {}

  ngOnInit() {
    this.sharedService.currentMessage.subscribe(message => this.message = message);
  }
}