如何使用rxjs在angular2中实现输入keyup事件去抖动服务

npm install rxjs

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

@Injectable()
export class DebounceService {
  private subject: Subject<string> = new Subject<string>();

  public getDebouncedValue(): Observable<string> {
    return this.subject.asObservable().pipe(
      debounceTime(300) // 设置去抖动的时间，单位为毫秒
    );
  }

  public emitValue(value: string): void {
    this.subject.next(value);
  }
}

import { Component } from '@angular/core';
import { DebounceService } from './debounce.service';

@Component({
  selector: 'app-example',
  template: `
    <input (keyup)="onKeyUp($event.target.value)">
  `,
  providers: [DebounceService]
})
export class ExampleComponent {
  constructor(private debounceService: DebounceService) {}

  public onKeyUp(value: string): void {
    this.debounceService.emitValue(value);
  }
}

import { Component, OnInit } from '@angular/core';
import { DebounceService } from './debounce.service';

@Component({
  selector: 'app-another-example',
  template: `
    <div>{{ debouncedValue }}</div>
  `
})
export class AnotherExampleComponent implements OnInit {
  public debouncedValue: string;

  constructor(private debounceService: DebounceService) {}

  ngOnInit(): void {
    this.debounceService.getDebouncedValue().subscribe(value => {
      this.debouncedValue = value;
    });
  }
}