要将用户输入的搜索数据传输到另一个组件,并从搜索结果中创建一个列表,可以使用Angular的服务和事件订阅机制来实现。
首先,在应用的根目录下创建一个共享的服务,用于在组件之间传递数据。可以使用Angular CLI命令ng generate service search
来生成该服务。
接下来,在search.service.ts
文件中,定义一个名为searchData
的可观察对象,并创建一个updateSearchData
方法来更新该对象的值。代码示例如下:
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class SearchService {
private searchData = new BehaviorSubject('');
currentSearchData = this.searchData.asObservable();
constructor() { }
updateSearchData(data: string) {
this.searchData.next(data);
}
}
然后,在用户输入搜索数据的组件中,将SearchService
注入,并在用户输入时调用updateSearchData
方法来更新搜索数据。代码示例如下:
import { Component } from '@angular/core';
import { SearchService } from 'src/app/search.service';
@Component({
selector: 'app-search-input',
template: `
`,
})
export class SearchInputComponent {
searchData: string;
constructor(private searchService: SearchService) { }
updateSearchData() {
this.searchService.updateSearchData(this.searchData);
}
}
最后,在用于显示搜索结果的组件中,将SearchService
注入,并订阅currentSearchData
可观察对象来获取最新的搜索数据。代码示例如下:
import { Component, OnInit } from '@angular/core';
import { SearchService } from 'src/app/search.service';
@Component({
selector: 'app-search-results',
template: `
- {{ result }}
`,
})
export class SearchResultsComponent implements OnInit {
searchResults: string[];
constructor(private searchService: SearchService) { }
ngOnInit() {
this.searchService.currentSearchData.subscribe(data => {
// 使用搜索数据来获取搜索结果,并更新searchResults数组
this.searchResults = this.getSearchResults(data);
});
}
getSearchResults(data: string): string[] {
// 根据搜索数据获取搜索结果的逻辑
// 返回一个包含搜索结果的字符串数组
}
}
现在,当用户在输入框中输入搜索数据时,它将被传递到SearchService
中的searchData
可观察对象。然后,SearchResultsComponent
组件将订阅该可观察对象,并在接收到新的搜索数据时更新搜索结果列表。
请注意,以上代码示例仅用于演示目的,你需要根据实际需求来实现getSearchResults
方法来获取真实的搜索结果数据。