NullInjectorError: No provider for BsDropdownConfig

Question

我想使用 ngx-bootstrap 下拉列表，所以我在 app.module

中导入了库

BsDropdownModule.forRoot(),

在我的 html 中，我想尝试文档中的示例

<div class="btn-group" dropdown>
        <button id="button-basic" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
                aria-controls="dropdown-basic">
          Button dropdown <span class="caret"></span>
        </button>
        <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
            role="menu" aria-labelledby="button-basic">
          <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
          <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
          <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
      </div>

我在控制台中收到此错误：

ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[BsDropdownDirective -> BsDropdownConfig]: 
  StaticInjectorError(Platform: core)[BsDropdownDirective -> BsDropdownConfig]: 
    NullInjectorError: No provider for BsDropdownConfig!
NullInjectorError: StaticInjectorError(AppModule)[BsDropdownDirective -> BsDropdownConfig

我尝试导入 BsDropdownConfig 但它不是模块。

有什么认为我必须导入的吗？

Answer 1

显然 BsDropdownModule 没有提供默认配置，这很奇怪，但是您可以手动提供一个，在根模块注入器中（在 providers 数组中），或者在组件自己的注入器使用

providers: [{ provide: BsDropdownConfig, useValue: { autoClose: true } }]

Answer 2

我发现我需要添加以下所需的依赖项。

 "ngx-bootstrap":"", //mention version compatable with your angular version 
  "ngx-intl-tel-input": "",
  "intl-tel-input",
  "google-libphonenumber"

请在对应版本的package.json文件中加入此依赖 运行 命令： npm 安装 之后导入 NgxIntlTelInputModule 模块

imports: [
    NgxIntlTelInputModule,
],

并在 angular.json 文件中添加 ngx 输入的主题

//keep your existing theme dont remove that.
     "styles": [
                 "", 
                 "./node_modules/intl-tel-input/build/css/intlTelInput.css"
               ],

如果您没有添加 intlTelInput.css 主题，国家/地区下拉列表将无法工作，只能显示文本输入字段。