效果如下：
页面结构
<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');}}}
