使用 RxJS 和 Angular
在本章中,我们将了解如何将 RxJ 与 Angular 结合使用。我们不会在这里讨论 Angular 的安装过程,要了解 Angular 安装,请参阅此链接 - https://www.tutorialspoint.com/angular7/angular7_environment_setup.htm
我们将直接处理一个示例,其中将使用 RxJS 中的 Ajax 来加载数据。
例子
应用程序组件.ts
import { Component } from '@angular/core'; import { environment } from './../environments/environment'; import { ajax } from 'rxjs/ajax'; import { map } from 'rxjs/operators' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = ''; data; constructor() { this.data = ""; this.title = "Using RxJs with Angular"; let a = this.getData(); } getData() { const response = ajax('https://jsonplaceholder.typicode.com/users') .pipe(map(e => e.response)); response.subscribe(res => { console.log(res); this.data = res; }); } }
应用程序组件.html
<div> <h3>{{title}}</h3> <ul *ngFor="let i of data"> <li>{{i.id}}: {{i.name}}</li> </ul> </div> <router-outlet></router-outlet>
我们使用 RxJS 中的 ajax 来从此 url 加载数据 - https://jsonplaceholder.typicode.com/users。
编译时显示如下 -