Angular 和 RxJS 导入

# 使用 Angular 和 RxJS 构建响应式应用

bash
npm install @angular/core rxjs

typescript
// 导入 Angular 核心模块
import { Component, OnInit } from '@angular/core';
// 导入 RxJS 相关模块
import { Observable } from 'rxjs';
import { map, filter } from 'rxjs/operators';

html
{{ result }}

typescript
// app.component.ts
import { Component } from '@angular/core';
import { fromEvent } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  searchTerm: string = '';
  searchResults: string[] = [];
  constructor() {
    // 创建一个可观察对象，监听输入框的变化
    const input = document.querySelector('input');
    const input$ = fromEvent(input, 'input');
    // 使用操作符进行搜索
    input$
      .pipe(
        debounceTime(300),
        distinctUntilChanged(),
        switchMap(() => this.search())  // 假设search方法返回一个Observable
      )
      .subscribe(results => {
        this.searchResults = results;
      });
  }
  // 模拟搜索方法
  search(): Observable {
    // 在实际应用中，这里可以是调用后端服务的代码
    const mockResults: string[] = ['结果1', '结果2', '结果3'];
    return of(mockResults);
  }
}