angular 的st组件怎么添加滚动条

要在Angular中的组件中添加滚动条，可以使用CSS样式或使用Angular自带的指令来实现。

使用CSS样式：

在组件的HTML模板中添加一个具有固定高度的容器元素，并为其添加overflow: auto;样式，这会自动在内容超出容器高度时显示滚动条。例如：

<div class="scroll-container">
  <!-- 内容 -->
</div>

在组件的CSS文件中添加以下样式：

.scroll-container {
  height: 300px; /* 适应需求的高度 */
  overflow: auto;
}

这样，当内容超出容器高度时，会自动显示滚动条。

使用Angular自带的指令：

Angular提供了perfect-scrollbar指令，可以方便地为组件添加自定义滚动条。首先，需要安装perfect-scrollbar库：

npm install perfect-scrollbar

然后，在组件的HTML模板中使用perfect-scrollbar指令来包装需要添加滚动条的内容。例如：

<div perfectScrollbar>
  <!-- 内容 -->
</div>

在组件的app.module.ts文件中引入perfect-scrollbar库并在imports数组中添加PerfectScrollbarModule。例如：

import { NgModule } from '@angular/core';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';

@NgModule({
  imports: [
    // ...
    PerfectScrollbarModule,
  ],
  // ...
})
export class AppModule { }

这样，就可以在组件中使用perfect-scrollbar指令来添加滚动条了