【Angular实战/网易云】搜索组件

最新推荐文章于 2021-01-11 16:58:57 发布

BananaScript

最新推荐文章于 2021-01-11 16:58:57 发布

阅读量374

点赞数

分类专栏： Angular # Angular实战

本文链接：https://blog.csdn.net/qq_43338695/article/details/108119532

版权

这篇博客详细介绍了如何在Angular中实现搜索组件的显示和隐藏，利用Overlay创建动态组件，并通过监听input元素的事件进行显示和隐藏的时机确认。文章强调了使用debounceTime和distinctUntilChange进行性能优化，以及组件间通信和模板渲染的方法。

摘要由CSDN通过智能技术生成

一. 显示和隐藏搜索组件

显示搜索组件就是在原来的界面上又跳出一个新的组件，这个可以用material cdk中的overlay来实现。

简单地来说就是：

用注入的Overlay实例的create方法创建OverlayRef实例。
利用ComponentPortal创建动态组件，赋值给panelPortal对象。
最后把panelPortal和overlayRef用attach方法结合起来。

  showOverlayPanel() {
    this.hideOverlayPanel();
    // 确定overlay显示的位置
    const positionStrategy = this.overlay.position()
      .flexibleConnectedTo(this.connectedRef || this.defalutRef)
      .withPositions([{
        originX: 'start',
        originY: 'bottom',
        overlayX: 'start',
        overlayY: 'top'
      }]).withLockedPosition(true);
    
    // 用工厂方法指定overlay实例
    this.overlayRef = this.overlay.create({
      hasBackdrop: true,
      positionStrategy,
      scrollStrategy: this.overlay.scrollStrategies.reposition()
    });
    const panelPortal = new ComponentPortal(WySearchPanelComponent, this.viewContainer