1. 首先创建一个 Angular 服务，该服务包含一个用于搜索输入文本的方法。在该服务中，使用 RxJS BehaviorSubject 对象来存储搜索结果。

2. 在组件中引用该服务，并创建一个 FormControl 对象用于处理输入的搜索文本。

3. 设置 input 元素的 [(ngModel)] 绑定到该 FormControl，并使用 debounceTime 操作符对用户输入的搜索文本进行延迟处理，确保只有用户完成输入之后才会执行搜索操作。

4. 在服务中定义搜索方法，该方法接受输入的搜索文本，并使用 JavaScript 的 Array.prototype.filter() 方法对数据进行过滤。将符合搜索条件的结果提交到 BehaviorSubject 对象中。

5. 在组件中使用 async 管道订阅 BehaviorSubject 对象，并在 ngFor 循环中使用结果。

下面是服务和组件代码的示例：

// search.service.ts import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' }) export class SearchService { private data = [ 'Angular', 'React', 'Vue.js', 'Ember.js', 'Backbone.js', 'Mithril' ];

private searchResult$: BehaviorSubject = new BehaviorSubject([]);

constructor() { }

search(text: string) { const matched = this.data.filter(item => item.toLowerCase().includes(text.toLowerCase())); this.searchResult$.next(matched); }

get searchResult() { return this.searchResult$.asObservable(); } }

// search.component.ts import { Component, OnInit } from '@angular/core'; import { FormControl } from '@angular/forms'; import { SearchService } from './search.service';

@Component({ selector: 'app-search', template: `

  
{{ result }}

` }) export class SearchComponent implements OnInit { searchText = new FormControl(''); searchResults: Observable;

constructor(private searchService: