RxJS和Angular。今天，我们将讨论RxJS和Angular，在Angular中使用RxJS的好处，以及如何一起使用它们。Erin ...

2021年6月17日 - 7分钟阅读

Erin Schaffer

Reactive Extensions for JavaScript，简称RxJS，是一个JavaScript库，使用观测器进行反应式编程。它可以与其他JavaScript库和框架一起使用，并且可以很好地集成到Angular中。今天，我们将讨论RxJS和Angular，在Angular中使用RxJS的好处，以及如何一起使用它们。

我们将介绍。

什么是RxJS？
RxJS的优点和缺点
什么是Angular？
Angular中的RxJS
总结和下一步工作

什么是RxJS？

通过使用反应式库，反应式范式可以在许多不同的语言中使用。这些库是下载的API，为观察者和操作者等反应式工具提供功能。Reactive Extensions for JavaScript，简称RxJS，是一个用于实现反应式编程的反应式库，以处理异步执行、回调和基于事件的程序。它可以在你的浏览器中使用，也可以与Node.js一起使用。

RxJS有一些核心功能，有助于处理异步实现。

可观察的

RxJS的观测器允许你发布事件。观察者有两种方法：订阅和取消订阅。你通过订阅它来执行一个可观察变量。观察者为一个事件流建模。
观察者

观察者是一个具有next(),error(), 和complete() 方法的对象，当与观察者发生交互时，它被调用。它们是订阅观察者的对象。
订阅

对观测器的订阅将触发观测器的执行。
操作符

操作符是一个函数，它允许我们对观测器执行的事件进行某些操作。
主体

主体与 EventEmitter 相同。它是一个观察者，向观察者群发信息。
调度器

一个调度器处理订阅的执行。

RxJS库很适合处理异步任务。它在过滤、错误处理、条件、创建、多播等方面有大量的操作者。它受到JavaScript和TypeScript的支持，并且与Angular配合得很好。

RxJS的优点和缺点

优点

RxJS是一个强大而流行的工具，并持续增长。它在GitHub上有超过200万个依赖库，在NPM上每周有超过2200万次下载。让我们来看看它如此受欢迎的一些原因。

灵活性。它可以与其他JavaScript库和框架一起使用。
伟大的API。使用RxJS，你能够用异步数据流简化你的工作流程，节省时间。
优化的。许多开发人员已经测试并改进了它。
可扩展性。它被设计为允许新的功能。
自给自足。RxJS没有任何第三方的依赖性。
有帮助的社区。RxJS社区的成员互相帮助解决问题和回答问题。

缺点

像任何其他工具一样，RxJS也有一些缺点。让我们来看看它们。

调试。用可观察变量调试代码并不总是那么简单。
数据的不可更改性。反应式编程与函数式编程相结合时效果最好。
tslib依赖性。RxJS的唯一依赖是tslib。内部实现的细节并不总是受到限制，这意味着你可以看到访问修饰符的一些不恰当的用法。

什么是Angular？

Angular是一个建立在TypeScript上的Web应用框架。它被许多前端开发者用来使用TypeScript和HTML构建单页客户端应用程序。有许多Angular应用程序。一些流行的Angular应用程序包括Gmail、Xbox、Upwork和PayPal。

有一些核心组件构成了Angular框架。让我们来看看它们。

组件

Angular组件是Angular应用程序的核心UI构建块。每个组件都有。
- 一个HTML模板，声明页面上显示的内容
- 一个TypeScript类，定义其行为
- 一个CSS选择器，定义如何在模板中使用该组件
模板

模板是由组件使用的。他们声明组件如何在页面上呈现。指令允许你为你的模板添加额外的功能。指令可以做很多事情，比如允许你修改DOM结构。最流行的是ngfor 和ngif 。
依赖性注入

在使用Angular时，依赖注入不是必须的，但它被称为最佳实践。它允许你声明你的类的依赖关系，同时让Angular来处理实例化问题。
库

库在Angular的基础功能上进行扩展，允许你做许多不同的事情。有许多Angular库可供你使用，例如。
- Angular Router
- Angular HttpClient
- Angular表单
- Angular PWA
- 等等。

Angular中的RxJS

让我们来看看RxJS如何在Angular中工作。我们将建立一个电话号码输入框。

让我们开始吧!

1.生成一个新的项目

在我们开始之前，让我们使用npm install -g @angular/cli 来安装Angular CLI。一旦完成，我们就可以开始着手开发我们的应用程序。

在你想创建应用程序的目录中运行ng new rx-phone --routing 。

你还将在项目的根目录下运行ng serve ，为电话号码输入框启动一个服务器。

注意：new 命令创建一个新的Angular应用程序。--routing 参数告诉ng ，为该应用程序添加一个可观察的路由。

2.使用CSS样式

我们要建立的应用程序使用Bootsrap的CSS来实现视觉效果。我们将首先打开index.html 。然后，让我们把CSS带进来，在文件的<head> ，添加以下标签。

<!-- Bootstrap (loaded from local server) -->
<link rel="stylesheet" href="http://localhost:3000/assets/bootstrap.min.css">

index.html

你会在app.component.html 中看到一些占位的HTML。删除它并在其位置上添加这个。

<div class="container">
    <router-outlet></router-outlet>
</div>

app.component.html

3.导入反应式表单

由于Reactive表单没有包含在Angular中，我们需要在应用程序级别上导入它们。

下面是我们的代码应该是这样的。

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms'; // <callout id="co.ng2reactiveforms.module1"/>

/* ... snip ... */
@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule // <callout id="co.ng2reactiveforms.module2"/>
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

app.module.ts

4.生成一个新的组件

运行ng generate component phone-num ，为路由模块添加声明。
用ng serve 启动Angular服务器。
为新组件添加一个路由到app-routing.module.ts 。

{
path: 'phone',
component: PhoneNumComponent
},

app-routing.module.ts

5.创建一个电话输入

打开phone-num.component.ts ，导入FormControl 和AbstractControl 。

import { FormControl, AbstractControl } from '@angular/forms';

phone-num.component.ts

6.创建一个`FormControl` 属性

添加以下一行作为声明到PhoneNumComponent 类。

import { FormControl, AbstractControl } from '@angular/forms';
export class PhoneNumComponent implements OnInit {
  phoneNumber = new FormControl();

phone-num.component.ts

7.验证表单

我们需要创建一些验证来确保用户给我们一个有效的电话号码。我们可以使用一个单一的、同步的验证规则来确保用户输入一个十位数的号码。

export class PhoneNumComponent implements OnInit {
  phoneNumber = new FormControl('', [
    (control: AbstractControl) => {
      // remove any input that isn't a digit
      const numDigits = control.value.replace(/[^\d]+/g, '').length;
      // only working with US numbers for now, don't need a country code
      if (numDigits === 10) { return null; }
      if (numDigits > 10) {
        return {
          tooLong: { numDigits }
        };
      } else {
        return {
          tooShort: { numDigits }
        };
      }
    }
  ]);

phone-num.component.ts part="form-control-prop"

8.显示错误信息

当插入的电话号码是有效的，验证器函数返回null ，显示没有错误。

_当有_错误时，验证器函数会返回一个对象。现在我们正在验证我们的电话号码，让我们更新视图以显示新的信息。

 <input [formControl]="phoneNumber" />
    <!-- (1) -->
    <div *ngIf="phoneNumber.invalid">
      <!-- (2) -->
      <div *ngIf="(phoneNumber.dirty || phoneNumber.touched)">
        <!-- (3) -->
        <div *ngIf="phoneNumber.errors.tooLong">
         Your phone number has too many digits!
          You entered {{ phoneNumber.errors.tooLong.numDigits }} 
              digits (required: 10)
        </div>
        <div *ngIf="phoneNumber.errors.tooShort">
          Your phone number is too short!
          You entered {{ phoneNumber.errors.tooShort.numDigits }} 
              digits (required: 10)
        </div>
      </div>
    </div>

phone-num.component.html part="validation"

接下来我们可以做的是在CSS类中添加造型细节，以向用户添加视觉提示。现在，我们将在这里结束本教程。

总结和下一步工作

祝贺你在Angular中迈出了RxJS的第一步!RxJS库可以帮助你以灵活、高效的方式处理异步实现。关于反应式编程和RxJS，还有很多东西需要学习，比如说。

可观察流
行为主体（BehaviorSubject
异步管道
以及更多

要学习这些概念，并学习如何在我们的电话号码输入框中为CSS类添加造型细节，请查看Educative的策划课程 用RxJS构建反应型网站：掌握可观察数据和Wrangle.在本课程中，你将学习如何使用可观察对象将调用和控制流委托给RxJS。

在本课程结束时，你将能够为你的用户建立更大、更快、更少错误的应用程序。

学习愉快!

继续学习关于React的知识

作者：Erin Schaffer

加入每月27万名读者的社区。免费的双月电子邮件，其中包括Educative的顶级文章和编码技巧的综述。

用一半的时间学习紧缺的技术技能

soc2