搜索
首页web前端js教程Angular 组件:初学者综合指南

构建单页应用程序是一门艺术,有许多令人印象深刻的框架可供选择。 Angular 是构建 Web 和移动应用程序最直观、最广泛使用的框架之一。今天,Angular 10 已经发布了,并且有许多令人印象深刻的功能。然而,在深入挖掘之前,您需要掌握组件。

首要任务:设置依赖项

在尝试 Angular 之前,您需要确保已成功安装以下依赖项:

  • Node.js
  • Angular CLI

您可以使用 NPM 全局安装 Angular CLI。

npm install -g @angular/cli

现在,您可以通过几种不同的方式启动 Angular 项目:

  • 手动创建它
  • 使用 Angular CLI
  • 从 GitHub 克隆并运行项目

以下是使用 Angular CLI 创建新项目的方法:

ng new my-project-name
cd my-project-name

就是这样!现在你的 Angular 之旅已经开始了。在这篇文章中,我们将构建一个简单的计算器,用于使用 Angular 将两个数字相加。

什么是角度组件?

在 Angular 中,我们使用指令。指令分为三种类型:结构指令、属性指令和组件指令。在接下来的几节中,我们将深入探讨有关组件的所有内容。

Angular 中的组件是我们设计和构建的用于渲染 UI 项目的元素。这些 UI 项目将允许用户与应用程序交互并访问其功能。

在本教程结束时,您将能够在 Angular 中构建组件。更重要的是,您将了解整个过程中的每一步。

从第一天起,组件就会在任何 Angular 项目中使用。在某种程度上,您可以将任何 Angular 项目视为由许多连接组件组成的树。每个组件都有一个特定的功能和一个渲染它的模板。单个模板可以在多个组件中重复使用。组件的集合形成了一个 Angular 应用程序,最终在浏览器中看到。

组件就像一个类,其中封装了元素的行为及其视图。行为包括加载或呈现的数据以及用户交互的方式,其视图是定义如何呈现数据的模板。

构建计算器组件

让我们通过创建一个用于添加两个数字的 Angular 组件来了解组件。我们不会在本教程中逐步创建组件,但您可以在我们的 GitHub 存储库中找到此应用程序的完整代码。

使用 Component 装饰器定义组件

Component 装饰器用于在 Angular 中定义组件。定义组件的元数据如下:

@Component({
  selector: 'calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css']
})
export class Calculator{
  
}

在上面的定义中,selector 告诉应用程序该组件需要用于应用程序 HTML 的哪些元素。 templateUrl 告诉应用程序可以呈现什么。上面装饰器中的其他所有内容都是可选的。

什么是选择器?

selector 是 Angular 中的一个重要属性。它帮助应用程序确定组件的放置位置。选择器始终是一个字符串。选择器可以通过三种不同的方式定义,每种方式都有独特的用例:

  • selector: 'calculator' 当组件将被指定为 HTML 中的 <calculator></calculator> 元素时可以使用。
  • selector: '.calculator' 如果组件要用作 CSS 元素,则可以使用  在 HTML 中。
  • selector: '[calculator]' 当组件应该用作属性时可以使用,它看起来像 .

选择器可以简单也可以复杂,但黄金法则是使选择器尽可能简单。

什么是模板?

templateUrl 用于标识组件将使用的模板。模板的路径应该是相对的。对于与组件源代码位于同一文件夹中的模板,您可以使用 templateUrl: './calculator.html' templateUrl: 'calculator.html'

不要使用服务器上 HTML 文件的绝对 URL。如果这样做,应用程序将无法编译。为什么? Angular 2+ 始终预编译代码并确保模板在构建过程中内联。

您还可以选择使用 template 选项将 templateUrl 选项替换为内联模板。这在简单组件中很有用,其中 TypeScript 代码和 HTML 不必位于不同的文件中。

这种做法对最终的应用没有任何影响。为什么?无论采用哪种方法,都会生成单个捆绑包。

什么是 styleUrl

组件从来都不是简单的;它总是充满多种风格。 styleUrl 属性的作用是帮助您包含特定于组件的 CSS。就像模板一样,您可以通过 styles 属性的作用是帮助您包含特定于组件的 CSS。就像模板一样,您可以通过 styles 属性使用内联样式。但如果代码具有大量样式,则需要将其分离到不同的文件中。

请注意,styleUrl 始终采用一个数组,因此您可以添加多个样式表。

样式封装

Angular 组件始终鼓励样式隔离和完整封装。这意味着子组件或父组件中的样式不会影响 UI 层次结构中的其他组件。

为了控制样式封装,Angular 在 Component 装饰器中提供了一个名为 encapsulation 的属性。封装可以具有以下值之一:

  • ViewEncapsulation.Emulated 是默认值。它创建填充样式来模拟影子根和 DOM。
  • 如果您的浏览器本身支持影子 DOM,则 ViewEncapsulation.ShadowDom 是最快的。
  • ViewEncapsulation.None,正如其名称所示,使用全局样式并避免任何形式的封装。

在我们的计算器组件中使用 encapsulation 属性的语法如下:

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
  selector: 'calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class Calculator{}

在上面的示例中,我们选择了 ViewEncapsulation.None。这绝对是将通用样式应用于父组件和子组件的最佳方式。

Angular 组件和模块

在深入了解组件生命周期之前,让我们先看看组件和模块是如何相互链接的。我们的计算器应用程序的模块如下:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CalcComponent } from './calc/calc.component'

@NgModule({
  declarations: [
    AppComponent,
    CalcComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

如果您创建组件,则必须将其包含为模块的一部分。

如果不将新创建的组件添加到模块中,则会出现错误。

要将组件添加到模块,必须首先导入它。首先,必须将导入的文件添加到 declarations 数组中。现在,该组件在整个应用程序中都是可见的,并且可以被其他组件使用。

让我们看看 @NgModule 指令中的每个数组代表什么:

  • declarations 确保指令和组件在模块的范围内可用。 Angular CLI 具有一项功能,可以将指令和组件自动添加到模块中。
  • imports 用于导入和访问其他模块。这允许开发人员在应用程序中包含第三方模块。
  • 如果您的项目创建一个库或多个模块,则使用 exports 。如果组件未导出,则无法在其他地方使用。

组件生命周期

我们现在准备了解组件和指令的生命周期。请记住,每个组件都有一个生命周期,从创建到销毁。渲染组件的那一刻,该组件及其子组件的生命周期就开始了。

了解生命周期事件在 Angular 应用程序中非常有用,它可以帮助开发人员正确观察和响应事件。

以下是 Angular 组件的生命周期挂钩,按照调用每个挂钩的顺序排列。

  1. 组件构造函数
  2. ngOnChanges
  3. ngOnInit
  4. ngDoCheck
  5. ngAfterContentInit
  6. ngAfterContentChecked
  7. ngAfterViewInit
  8. ngAfterViewChecked
  9. ngOnDestroy

创建组件时,会调用 构造函数 。接下来,按照上述顺序调用各种钩子。某些挂钩(例如 OnInitAfterContentInit)将仅被调用一次。同时,只要组件中的内容发生更改,就会调用其他挂钩。最后,onDestroy 被调用一次。

上面的生命周期钩子有一个接口。要使用钩子,您应该实现该接口。通常,该接口带有函数,以 ng 开头。例如,如果要使用 ngOnInit 函数,则组件必须实现 OnInit 接口。以下是 Angular 组件中生命周期挂钩中常用接口和方法的快速摘要。该表再次根据实现时首先调用的方法进行排序。

界面 方法 目的
OnChanges ngOnChanges 在构造函数之后以及输入值发生更改时调用。
OnInit ngOnInit 仅调用一次。非常特定于组件或指令。它是从服务器加载数据的最佳位置。
DoCheck ngDoCheck 当 Angular 无法自动检查更改或绑定时,使用此方法。它通知组件任何变化。
AfterContentInit ngAfterContentInit 仅调用一次。它由组件初始化触发。
AfterContentChecked ngAfterContentChecked 在组件内容的每次更改时调用。
AfterViewInit ngAfterViewInit 一旦每个子组件都被初始化,就会调用这个生命周期钩子。视图可能没有完全渲染,但内部视图已经由 Angular 准备好了。
AfterViewChanged ngAfterViewChecked 一旦每个子组件都经过验证和更新,就会调用此挂钩。
OnDestroy ngOnDestroy 如果组件准备好从 UI 中删除或销毁,则会调用此挂钩。这是保留取消订阅和取消注册可观察对象或计时器的侦听器的好地方。

现在,如果您想将生命周期挂钩添加到我们的计算器组件中,它将显示如下:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'calculator',
  templateUrl: './calculator.component.html',
  styleUrls: ['./calculator.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class Calculator implements OnInit {
                                     
  constructor() {}

  ngOnInit(): void {
    console.log('Component - On Init');
  }

}

创建计算器组件

我们正在构建的计算器应用程序的 UI 如下所示。

Angular 组件:初学者综合指南

这是我们将添加到组件模板中的 HTML:

<div class="row">
    <div class="col-12">
    	<input [(ngModel)]="number1" type="number" name="" placeholder="number">
	</div>
</div>
<div class="row">
	<div class="col-12">
		<input [(ngModel)]="number2" type="number" name="" placeholder="number">
	</div>
</div>
<button (click)="add()" class="button">
    Add 
</button>
<div class="result">
    <span>
		Result : {{result}}
	</span>
</div>

交互

UI呈现后,用户将对应用程序执行操作。现在,应用程序必须做出相应的响应。例如,当用户输入两个数字并单击添加时,我们的计算器必须进行添加。使用此功能连接输入框的最简单方法是通过 ngModel。在 HTML 模板文件中,每个输入都可以链接到 ngModel 变量。您可以在上面的 HTML 中看到,我们有许多 ngModel 属性将 HTML 元素链接到我们的 TypeScript 代码。这些变量将在计算器组件源代码中声明和使用。

让我们看看如何在计算器的 TypeScript 代码中使用 ngModel 变量。

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

@Component({
  selector: 'calc',
  templateUrl: 'calc.component.html',
  styleUrls: ['calc.component.css']
})
export class CalcComponent {
  public number1 : number;
  public number2 : number;
  public result : number;

  public add(){
      this.result = this.number1 + this.number2
  }
}

每次用户在输入框中输入值时,this.number1this.number2 都会相应更新。为什么? ngModel 用于捕获输入。

当用户点击添加按钮时,将调用 add 函数。如何?我们利用 (click) 控件将按钮连接到 add 方法。

当调用 add 时,this.result 根据 this.number1this.number2 进行更新。一旦 this.result 更新,UI 也会更新。如何? {{result}} 链接到 this.result

这就结束了!

我希望本教程有用。现在,您应该了解 Angular 组件的基础知识。您刚刚了解了如何定义组件、利用各种生命周期挂钩,以及最终进行用户交互。这仅仅是个开始。 Angular 组件还有很多东西。

本教程中功能齐全的源代码可在 GitHub 上获取。看一看,并尝试创建您自己的 Angular 项目 - 这是最好的学习方式!

以上是Angular 组件:初学者综合指南的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
Python vs. JavaScript:开发环境和工具Python vs. JavaScript:开发环境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda,适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack,适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

JavaScript是用C编写的吗?检查证据JavaScript是用C编写的吗?检查证据Apr 25, 2025 am 12:15 AM

是的,JavaScript的引擎核心是用C语言编写的。1)C语言提供了高效性能和底层控制,适合JavaScript引擎的开发。2)以V8引擎为例,其核心用C 编写,结合了C的效率和面向对象特性。3)JavaScript引擎的工作原理包括解析、编译和执行,C语言在这些过程中发挥关键作用。

JavaScript的角色:使网络交互和动态JavaScript的角色:使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心,因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容,2)通过DOMAPI操作网页,3)支持复杂的交互效果如动画和拖放,4)优化性能和最佳实践提高用户体验。

C和JavaScript:连接解释C和JavaScript:连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1)C 代码编译成WebAssembly模块,引入到JavaScript环境中,增强计算能力。2)在游戏开发中,C 处理物理引擎和图形渲染,JavaScript负责游戏逻辑和用户界面。

从网站到应用程序:JavaScript的不同应用从网站到应用程序:JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中,JavaScript与HTML、CSS一起操作DOM,实现动态效果,并支持如jQuery、React等框架。2)通过ReactNative和Ionic,JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行,支持高并发请求。

Python vs. JavaScript:比较用例和应用程序Python vs. JavaScript:比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化,JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色,使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺,用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用,支持全栈开发。

C/C在JavaScript口译员和编译器中的作用C/C在JavaScript口译员和编译器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。 1)C 用于解析JavaScript源码并生成抽象语法树。 2)C 负责生成和执行字节码。 3)C 实现JIT编译器,在运行时优化和编译热点代码,显着提高JavaScript的执行效率。

JavaScript在行动中:现实世界中的示例和项目JavaScript在行动中:现实世界中的示例和项目Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用,涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。