Angular-超过固定高度时-出现展开折叠按钮

效果如下：

页面结构

<div class="content-box" #content>
          <span class="content-item" *ngFor="let item of searchList; let i = index">{
    
    {
    
     item.name }}</span>
          <div #btn class="open-btn">
            <div class="btn-img" (click)="develop()" [style]="ifDevelop ? 'transform: rotate(-180deg)' : ''"></div>
    	  </div>
</div>

页面默认应用content-box样式，利用 overflow: hidden(内容会被修剪，并且其余内容是不可见的) 属性,将超出高度内容隐藏起来
通过点击事件将show-content样式中的overflow: auto（如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。）将页面内容展示

.content {
    
    
    height: auto;
    overflow: auto;
  }

  .content-box {
    
    
    position: relative;
    overflow: hidden;
    font-size: 18px;
  }
.open-before {
    
    
  height: 145px;
}

.show-content {
    
    
  height: auto;
  overflow: auto;
}

.btn-hidden {
    
    
  display: none
}

.open-btn {
    
    
  position: absolute;
  bottom: 20px;
  right: 0;
}

获取页面高度，判断是否展示折叠按钮，通过open-before样式类设置高度

export class GlobalSearchComponent implements OnInit, AfterViewInit {
    
    
  @ViewChild('content') content: ElementRef;
  @ViewChild('btn') btn: ElementRef;
  //控制展开收起
  ifDevelop: boolean = false;
  constructor(private renderer: Renderer2) {
    
    }
  ngAfterViewInit(): void {
    
    
    console.log('高度', this.content.nativeElement.offsetHeight);
    let height = this.content.nativeElement.offsetHeight;
    if (height  > 140) {
    
    
          this.renderer.addClass(this.content.nativeElement, 'open-before');
          移除按钮隐藏样式
          this.renderer.removeClass(this.btn.nativeElement, 'btn-hidden');
    } else {
    
    
    小于高度140移除高度
          this.renderer.removeClass(this.content.nativeElement, 'open-before');
          按钮隐藏
          this.renderer.addClass(this.btn.nativeElement, 'btn-hidden');
          this.develop();
    }
  }
  develop() {
    
    
    this.ifDevelop = !this.ifDevelop;
    if (this.ifDevelop) {
    
    
      this.renderer.addClass(this.content.nativeElement, 'show-content');
    } else {
    
    
      this.renderer.removeClass(this.content.nativeElement, 'show-content');
    }
  }
}