在Angular 6中,可以通过使用服务来实现搜索栏和结果两个不相关的组件之间的通信。以下是一个示例解决方法:
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class SearchService {
private searchQuery = new Subject();
searchQuery$ = this.searchQuery.asObservable();
setSearchQuery(query: string) {
this.searchQuery.next(query);
}
}
import { Component } from '@angular/core';
import { SearchService } from './search.service';
@Component({
selector: 'app-search-bar',
template: `
`
})
export class SearchBarComponent {
searchQuery: string;
constructor(private searchService: SearchService) { }
onSearch() {
this.searchService.setSearchQuery(this.searchQuery);
}
}
import { Component, OnInit } from '@angular/core';
import { SearchService } from './search.service';
@Component({
selector: 'app-search-results',
template: `
- {{ result }}
`
})
export class SearchResultsComponent implements OnInit {
searchResults: string[] = [];
constructor(private searchService: SearchService) { }
ngOnInit() {
this.searchService.searchQuery$.subscribe(query => {
// 模拟异步获取搜索结果
setTimeout(() => {
this.searchResults = ['Result 1', 'Result 2', 'Result 3'];
}, 500);
});
}
}
通过以上步骤,搜索栏组件将搜索关键字发送给SearchService,结果组件通过订阅SearchService获取搜索关键字,并在关键字发生变化时更新结果。请注意,结果的获取过程可以替换为实际的异步HTTP请求等操作。