出现错误：“BsDropdownDirective”既不是“ComponentType”也不是“DirectiveType”

Question

我在我的 HTML 中使用 Angular 9 和 NgX bootstrap@6.2.0，如下所示：-

<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>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>

在我的 ts 文件中，我有这样的

import { Component } from '@angular/core';
 
@Component({
  selector: 'demo-dropdown-basic',
  templateUrl: './basic.html',
  providers: [
    {
      provide: BsDropdownConfig,
      useValue: { isAnimated: true, autoClose: true },
    },
  ],
})
export class DemoDropdownBasicComponent {}

当我运行代码时，我收到以下错误：-

core.js:6241 ERROR Error: 'BsDropdownDirective' is neither 'ComponentType' or 'DirectiveType'.
    at extractDirectiveDef (core.js:1964)
    at Array.map (<anonymous>)
    at def.directiveDefs (core.js:1926)
    at createTView (core.js:12307)
    at getOrCreateTComponentView (core.js:12252)
    at addComponentLogic (core.js:13224)
    at instantiateAllDirectives (core.js:12994)
    at createDirectivesInstances (core.js:12209)
    at ɵɵelementStart (core.js:21302)

Answer 1

你需要定义BsDropdownConfig

 import { Component } from '@angular/core';
 import { BsDropdownConfig } from 'ngx-bootstrap/dropdown'; // add this line
@Component({
  selector: 'demo-dropdown-basic',
  templateUrl: './basic.html',
  providers: [{ provide: BsDropdownConfig, useValue: { isAnimated: true, autoClose: true } }]
})
export class DemoDropdownBasicComponent {}