如何移除ngb-carousel中的指示器（使用HTML表格替代图片）

嗨，我来帮你搞定这个需求！在Angular 5项目里使用ngb-carousel时，要去掉底部的导航指示器其实非常简单，这里有两种靠谱的方法：

• 方法一：使用组件内置输入属性（推荐）
  ngb-carousel本身提供了控制指示器显示的输入属性showNavigationIndicators，你只需要把它绑定为false就能直接隐藏底部的指示器，这是官方推荐的最规范的方式，代码示例如下：

  <ngb-carousel [showNavigationIndicators]="false">
    <!-- 你的轮播幻灯片内容，比如渲染好的HTML表格 -->
    <ng-template ngbSlide>
      <table class="your-table-class">
        <!-- 表格的具体内容 -->
      </table>
    </ng-template>
    <!-- 如果有更多幻灯片，继续添加ng-template ngbSlide -->
  </ngb-carousel>
  

• 方法二：通过CSS强制隐藏
  如果因为版本兼容或者特殊场景导致第一种方法不生效，你可以用CSS来隐藏指示器元素。需要注意的是，如果是在组件的样式文件中编写，可能需要使用::ng-deep来穿透组件的样式隔离：

  /* 全局样式文件中直接写 */
  .carousel-indicators {
    display: none !important;
  }
  
  /* 组件样式文件中需要加::ng-deep */
  ::ng-deep .carousel-indicators {
    display: none;
  }
  

小提示：优先选择方法一，因为它是组件原生支持的能力，不会引入CSS样式冲突的风险，维护起来也更方便~

内容的提问来源于stack exchange，提问作者anathema