ngx-bootstrap 7升级后BsDropdownModule.forRoot报TS2554错误如何配置

ngx-bootstrap 7.x版本对BsDropdownModule的全局配置逻辑做了破坏性变更，原有6.x版本中BsDropdownModule.forRoot()接收配置参数的用法已被移除，因此传参时会抛出TS2554: Expected 0 arguments, but got 1的编译错误。

全局配置（等效原forRoot传参效果） #

通过BS_DROPDOWN_CONFIG注入令牌提供全局默认配置，步骤如下：

1. 在app.module.ts中导入相关依赖：

import { BsDropdownModule, BS_DROPDOWN_CONFIG, BsDropdownConfig } from 'ngx-bootstrap/dropdown';

2. 在@NgModule的imports数组中调用无参的forRoot()，同时在providers中添加全局配置：

@NgModule({
  imports: [
    // 其他导入项...
    BsDropdownModule.forRoot()
  ],
  providers: [
    {
      provide: BS_DROPDOWN_CONFIG,
      useValue: {
        isAnimated: false,
        autoClose: true
      } as BsDropdownConfig
    }
    // 其他providers...
  ]
})
export class AppModule { }

单个组件独立配置 #

如果只需要给特定下拉框设置参数，直接在组件模板中给bsDropdown绑定对应输入属性即可：

<div class="dropdown" bsDropdown [isAnimated]="false" [autoClose]="true">
  <button bsDropdownToggle type="button" class="btn btn-primary dropdown-toggle">
    下拉按钮
  </button>
  <div *bsDropdownMenu class="dropdown-menu">
    <a class="dropdown-item" href="#">菜单项1</a>
    <a class="dropdown-item" href="#">菜单项2</a>
  </div>
</div>

注：两种配置方式支持的参数名和6.x版本forRoot传入的参数完全一致，无需修改参数字段。

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