Angular
前言
- 因为项目需求，需要实现一个搜索功能，之前看Angular官方文档的时候，记得有相同的实现，也没多想，心想着既然是官方文档，应该代码质量也是有保证的，所以就照着官方例子写了。然而，事情并没有想象中那么简单。
1.代码
- HTML代码(文档中的例子)：
<div id="search-component">
<h4>Hero Search</h4>
<input #searchBox id="search-box" (keyup)="search(searchBox.value)" />
<div>
<div *ngFor="let hero of heroes | async"
(click)="gotoDetail(hero)" class="search-result" >
{{hero.name}}
</div>
</div>
</div>
- TS部分代码：
search(term: string): void {
this.searchTerms.next(term);
}
ngOnInit(): void {
this.heroes = this.searchTerms
.debounceTime(300) // wait 300ms after each keystroke before considering the term
.distinctUntilChanged() // ignore if next search term is same as previous
.switchMap(term => term // switch to new observable each time the term changes
// return the http search observable
? this.heroSearchService.search(term)
// or the observable of empty heroes if there was no search term
: Observable.of<Hero[]>([]))
.catch(error => {
// TODO: add real error handling
console.log(error);
return Observable.of<Hero[]>([]);
});
}
2.问题
- 实例代码中实现的功能是在搜索框中输入搜索条件，触发一个keyup事件即可通过HTTP发送搜索请求，不像之前项目中的搜索，输入完搜索条件还需要点击搜索按钮，这也算是Angular数据绑定好处吧。
- 但是，真相是绑定的(keyup)事件并没有每次都按照预期的运行，在测试功能的过程中，居然发现输入值后搜索不了，一检查keyup事件居然没有触发，虽然概率大概是20%左右，但是出了问题总要解决啊。
3.解决方案
- 然后就去Stack Overflow上寻找答案，居然还真有，解决方法在此，本来还以为是自己代码写的有问题，然而并不是。
- 解决方案：
// HTML
<input [(ngModel)]="searchBox" id="search-box" (keyup)="search(event)"/>
// Compoenet
searchBox: string // declare before constructor into your component
// declare after constructor into your component
@HostListener('document:keyup', ['$event'])
search(event: KeyboardEvent): void {
this.searchTerms.next(this.searchBox);
}
- 解释一下，该解决方案的意思是，把搜索框的值进行双向绑定，然后使用一个HostListener来监听文档中的keyup事件，就是每次触发keyup事件都调用search()函数，按照解决方法试了一下，发现真的可以，按道理应该到此就圆满结束。
- 但是并没有，填完一个坑总是又有一个新的坑。正如上文所言，上述解决方案中的HostListener是用来监听整个文档中的keyup事件，这就很尴尬了，项目需求中是同一个页面中两个搜索框，只要任何有一个keyup触发，都会调用该搜索功能，这他么还得力，每次keyup事件调用一次，这显然是一个更大的坑啊！
- 好忧桑，怎么办，如何解决？
4.最终解决方案：
- 后来想了想，算了吧，这个绑定keyup事件功能就不用了，不就是输入完自动搜索嘛，不要了。果断加了个搜索按钮，然后绑定(click)事件，每次输入完毕后去点一下，实现完毕之后测试了几十次，发现果然没有再出现不能触发事件的问题了。
总结
- 写代码还是要自己动手实践，实践中遇到问题是好事情，通过解决这些问题，才能锻炼和提升自身能力。
- 前端Angular打怪升级中，业余写写学习笔记，记录并分享学习心得，欢迎骚扰讨论技术问题。
