我有一個基本的應用程序：一個頂欄和一個通用區域：（這是一個簡化的 HTML 版本，來自 app.component.html）
<header>
<app-top-bar >
</app-top-bar>
</header>
<main>
<div class="container-fluid">
<router-outlet></router-outlet>
</div>
</main>
現在：在 app-top-bar 我有一個 INPUT 用作一般搜索 - 搜索將應用於路由器插座內實時出現的任何組件。因此，我需要讓子組件“知道”（通過調用其上的方法或任何其他機制）已經輸入了搜索詞。
現在我知道父母如何與孩子交流（@input，@ViewChild ...），但是在這種情況下我該怎麼做 - 與根據用戶導航不斷變化的孩子交流？
您可以ServiceService在根級別創建一個提供search(...)方法和searchChanges()返回 observable的方法。然後簡單地將服務注入到支持全局搜索的組件中，監聽搜索變化。
@Inject({ providedIn: 'root' })
export class SearchService {
private readonly searchChanges$ = new Subject<string>();
search(text: string): void {
this.searchChanges$.next(text);
}
searchChanges(): Observable<string> {
return this.searchChanges$.asObservable();
}
}
@Component({
selector: 'app-top-bar',
...
})
export class TopBarComponent {
constructor(private searchService: SearchService) {
}
onSearch(text: string): void {
this.searchService.search(text);
}
}
@Component({
selector: 'app-other',
...
})
export class OtherComponent implements OnInit {
constructor(private searchService: SearchService) {
}
ngOnInit(): void {
this.searchService.searchChanges().subscribe(text => {
// Handle search here
});
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句