搜索组件

首页顶部的搜索框要开始实现了。使用场景很明确，就是去根据关键字去调用专用的接口拿到返回值后渲染到组件中。

---

为了方便维护，将搜索框封装成单独的模块

创建search模块

// 在wy-ui下执行ng g m wy-searchng g c wy-search

为了避免循环引用shareModule，所以要在WySearchModule中逐个引用。

---

自定义组件

使用ng-container和ng-template标签灵活创建组件渲染的内容

• wy-search.component.html

<ng-template #default><div class="search" #search><nz-input-group nzSuffixIcon="search"><input nz-input #nzInput placeholder="歌单/歌手"  /></nz-input-group></div>
</ng-template><ng-container *ngTemplateOutlet="default"></ng-container>

• app.component.html

<app-wy-search  (onSearch)="onSearch($event)"></app-wy-search>

• wy-search.component.ts

	@ViewChild('nzInput', { static: false }) private nzInput: ElementRef;@Output() onSearch = new EventEmitter<string>();//  发射输入框的值ngAfterViewInit (): void {fromEvent(this.nzInput.nativeElement, 'input').pipe(debounceTime(300), // 防抖distinctUntilChanged(), // 去重pluck('target', 'value')).subscribe((input: string) => {this.onSearch.emit(input);})}

当试图渲染完成之后就去绑定输入框，将每次的输入值经过防抖和去重后发射给父组件。

这里的自定义体现在app模块可以自己定义一个templateref类型的内容，然后通过引用类型将值传给子组件。

---

调用接口

• search.service.ts

	// 获取关键字搜索内容search (keywords: string): Observable<SearchResult> {const params = new HttpParams().set('keywords', keywords);return this.http.get(this.uri + 'search/suggest', { params }).pipe(map((res: { result: SearchResult }) => res.result))}

因为目前只做了歌手，歌单和歌曲模块，所以searchResult类型的属性就只定义这三个。

• common.type.ts

// 关键字返回值
export type SearchResult = {artists?: Singer[],playlists?: SongSheet[],songs?: Song[],
}

---

实现接口

• app.component.ts

    constructor(private searchServe: SearchService ) { }onSearch (keywords: string) {if (keywords) {this.searchServe.search(keywords).subscribe(res => {this.searchResult = this.highlightKeyWords(keywords, res);;})} else {this.searchResult = {}}}// 关键字高亮private highlightKeyWords (kewwords: string, result: SearchResult): SearchResult {if (!isEmptyObject(result)) {const reg = new RegExp(kewwords, 'ig');['artists', 'playlists', 'songs'].forEach(type => {if (result[type]) {result[type].forEach(item => {item.name = item.name.replace(reg, '<span class="highlight">$&</span>');});}})}return result;}

页面中接到子组件传来的关键字后经过searchServer后拿到数据的返回值，额外的需求是将返回值中含有的参数高亮，所以在经过一个回调即可。回调高亮的逻辑也很清晰，通过传来的关键字和返回值，通过对关键字进行正则匹配后，将匹配到的关键字加上特有的类就可以在页面上使用 innerHtml来渲染。

---

实现浮层

浮层的使用是Material组件库下的overlay（浮层）。

是用的逻辑很简单，主要分为三步：
1、创建浮层
2、创建门户
3、为浮层添加门户

创建之后就可以为浮层添加配置，从而就可以实现最终效果。

创建浮层组件

在wy-search目录下创建wy-search-panel组件，这个组件仅是展示内容，关于浮层和门户的创建都是在search下实现的。

• wy-search-panel.component.html

<div class="search-panel"><div class="list-wrap"><div class="list-item clearfix" [hidden]="!searchResult?.songs"><div class="hd"><i class="ico ico-song"></i><span>单曲</span></div><ul><li class="ellipsis" *ngFor="let item of searchResult?.songs" (mousedown)="toInfo(['/songInfo', item.id])" [innerHTML]="item.name"></li></ul></div><div class="list-item clearfix" [hidden]="!searchResult?.artists"><div class="hd"><i class="ico ico-singer"></i><span>歌手</span></div><ul><li class="ellipsis" *ngFor="let item of searchResult?.artists" (mousedown)="toInfo(['/singer', item.id])" [innerHTML]="item.name"></li></ul></div><div class="list-item clearfix" [hidden]="!searchResult?.playlists"><div class="hd"><i class="ico ico-sheet"></i><span>歌单</span></div><ul><li class="ellipsis" *ngFor="let item of searchResult?.playlists" (mousedown)="toInfo(['/sheetInfo', item.id])" [innerHTML]="item.name"></li></ul></div></div></div>

• wy-search-panel.component.ts

 	searchResult: SearchResult;constructor(private router: Router) { }// 跳转toInfo (path: [string, number]) {if (path[1]) {this.router.navigate(path);}}

当浮层拿到返回值后，就可以渲染当前值，通过点击渲染的值将路由和ID传给回调，实现跳转页面。

浮层实现

当点击输入框并输入值后，app模块会将带着高亮的返回值传给search组件。search组件将会实时监听返回值的变化，不为空时就会显示浮层，否则就会关上。在打开浮层的回调中实现组件库的引用。

• wy-search.component.ts

    @Input() searchResult: SearchResult; // 关键字返回值@Input() connectedRef: ElementRef;@ViewChild('search', { static: false }) private defaultRef: ElementRef;private overlayRef: OverlayRef;constructor(private overlay: Overlay,private viewContainerRef: ViewContainerRef,) { }// 搜索值监听ngOnChanges (changes: SimpleChanges): void {if (changes.searchResult && !changes.searchResult.firstChange) {if (!isEmptyObject(this.searchResult)) {this.showOverlayPanel();} else {this.hideOverlayPanel();}}}// 聚焦onFocus () {if (this.searchResult && !isEmptyObject(this.searchResult)) {this.showOverlayPanel();}}// 失焦onBlur () {this.hideOverlayPanel();}// 添加浮层showOverlayPanel () {this.hideOverlayPanel();const positionStrategy = this.overlay.position().flexibleConnectedTo(this.connectedRef || this.defaultRef).withPositions([{originX: 'start',originY: 'bottom',overlayX: 'start',overlayY: 'top',}]).withLockedPosition(true);this.overlayRef = this.overlay.create({// hasBackdrop: true,positionStrategy,scrollStrategy: this.overlay.scrollStrategies.reposition(),})const panelPortal = new ComponentPortal(WySearchPanelComponent, this.viewContainerRef);const panelRef = this.overlayRef.attach(panelPortal);panelRef.instance.searchResult = this.searchResult;this.overlayRef.backdropClick().subscribe(() => {this.hideOverlayPanel();})}// 移除浮层hideOverlayPanel () {if (this.overlayRef && this.overlayRef.hasAttached) {this.overlayRef.dispose();}}

先声明浮层操作类和浮层，然后使用overlay去create一个浮层，而create里边的参数都是配置。之后实例化的是门户，传了两个参数，一个是要显示的组件类，另一个是作为位置参照的ref类型。然后就可以用overlay的attach方法将门户添加到浮层上了，去除浮层可以用dispose方法。

其中参数的选择上使用了定位策略和滚动策略。第一个参数是定位。

定位策略
positionStrategy 配置项决定了浮层在屏幕上的定位方式。本库内置了两种定位策略： GlobalPositionStrategy 和 ConnectedPositionStrategy。

GlobalPositionStrategy 用于需要定位在视口中特定位置的浮层，位置与别的元素无关。这通常用于模态对话框和应用级通知。

ConnectedPositionStrategy 用于相对于页面中其它 “origin”（原点）元素进行定位的浮层。这通常用于菜单、选择器和工具提示。当使用这种连接策略时，会提供一组首选位置，然后根据浮层在视口中的适合程度来选出一个“最佳”位置。

FlexibleConnectedPositionStrategy 扩展了 ConnectedPositionStrategy 的功能，增加了更高级的功能，它还能相对于页面上的另一个元素定位一个浮层。其特性包括能让浮层在其内容到达视口边缘时变得可滚动；能够在浮层和视口边缘之间配置一个边距；如果浮层不适合任何一个首选位置，还能把它推入到视口中；还可以配置在打开浮层时，其大小是否会增长。这种灵活的定位策略还允许使用 withTransformOriginOn 来基于当前位置设置浮层内元素的 transform-origin。当浮层中有动画，且动画开始于其原点元素的位置时，这很有用。

查阅文档时有一层逻辑一直很绕，如果使用 FlexibleConnectedPositionStrategy定位策略就要使用flexibleConnectedTo方法，因为该方法返回值是这个类型，而这个方法属于OverlayPositionBuilder类型，所以要使用Overlay类型下的position方法，因为该方法返回builder类型，所以定义参数时就会有很长的一个函数流。

为了解决滚动时浮层不固定参照模板的问题，之后的参数便是滚动策略

滚动策略
scrollStrategy 配置项决定了浮层如何响应浮层元素外部的滚动。本库内置了四种可用的滚动策略。

NoopScrollStrategy 是默认选项。该策略什么都不做。

CloseScrollStrategy 会在滚动时自动关闭浮层。

当浮层打开时，BlockScrollStrategy 会阻止页面滚动。注意，某些应用可能会实现特殊或自定义的页面滚动；如果BlockScrollStrategy 与这种情况冲突，可以通过重新提供带有自定义实现的 BlockScrollStrategy 来覆盖它。

RepositionScrollStrategy 会在滚动时重新定位浮层元素。注意，这会对滚动带来一些性能影响 - 用户应该在每个具体应用的上下文中权衡这种代价。

当位置重新定位时为了能够固定浮层，可以使用withLockedPosition方法，因此前提是使用RepositionScrollStrategy 滚动策略。

关于search向浮层页传值，因为这个关键词返回值是动态的，而且也没有父子组件嵌套关系,在打印了componentRef类型的门户中可以发现其中的instance属性是wySearchPanelcomponent类型，因此可以直接调用其中的searchResult变量来赋值。

---

总结

关于使用material组件库，其中的难点在于api的不熟悉以及对angular指令化的不理解，关于这个浮层的实现，除了使用这个组件库，关于ngrx插件中的一些方法也不熟悉，但是用了之后是真香！还有就是关于angular的升级，当时导入组件库的时候怎么都报错，根据提示升级后整个项目就炸了，，先是一些引用的报错其次就是一些方法的弃用，到目前为止，项目能跑起来，但总觉得有些数据是不对的，包括方法的使用也是不合适的，等后期总结修改吧！！！