Angular 7 Bootstrap 指令不加载

Question

我有这个代码:

组件html:

<td>
  <div ngbDropdown class="d-inline-block">
    <a ngbDropdownToggle>
      <fa-icon [icon]="faEllipsis"></fa-icon>
    </a>
    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
      <button class="dropdown-item">Action - 1</button>
      <button class="dropdown-item">Another Action</button>
      <button class="dropdown-item">Something else is here</button>
    </div>
  </div>
</td>

组件 ts:

import { Component, Input, OnInit } from '@angular/core';
import { Group } from "../../../common/models/Group";
import { faEllipsisV } from '@fortawesome/free-solid-svg-icons';


@Component({
  selector: '[study-groups-row]',
  templateUrl: './study-groups-row.component.html',
  styleUrls: ['./study-groups-row.component.css']
})
export class StudyGroupsRowComponent implements OnInit {
  @Input() group: Group;
  faEllipsis = faEllipsisV;

  constructor() {
  }

  ngOnInit() {

  }

}

这在我的模块中:

@NgModule({
  declarations: [
    AppComponent,
    StudyComponent,
    PageNotFoundComponent,
    CreateNewStudyComponent,
    LoadingBackgroundComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    NgbModule,
    HttpClientModule,
    FontAwesomeModule,
    AppRoutingModule,
    StudyModule
  ],
  bootstrap: [AppComponent],
  providers: [
  ]
})
export class AppModule {
  constructor() {
    library.add(faSpinner, faSave, faAngleDown);
  }
}

我的 package.json 中有这个:

 "@angular/core": "~7.2.0",
 "bootstrap": "^4.2.1",
 "@ng-bootstrap/ng-bootstrap": "^4.0.1",

它编译没有错误并且控制台中没有错误但下拉菜单不起作用？没有添加引导类？它们应该由指令动态添加吗？

我在 vendor.js 中添加了断点:

var NgbDropdownMenu = /** @class */ (function () {
    function NgbDropdownMenu(dropdown, _elementRef, _renderer) {

但是当我刷新页面时它并没有暂停。我的 angular.json 有 boostrap css 并且它已加载。

我错过了什么？ Docs say that you only need add import into ngModule .

编辑 :文档说它支持 Angular 7.0.0 我使用的是 7.2。我已经降级到7.0，但它仍然不起作用。我尝试从 docs (Accordion) 添加第一个组件，现在得到了这个错误(下拉菜单没有显示它正在运行的迹象):

Uncaught Error: Template parse errors:
There is no directive with "exportAs" set to "ngbAccordion" ("<ngb-accordion [ERROR ->]#acc="ngbAccordion" activeIds="ngb-panel-0">
  <ngb-panel title="Simple">
    <ng-template ngbPanelCo"): ng:///StudyModule/StudyGroupsComponent.html@0:15
'ngb-panel' is not a known element:
1. If 'ngb-panel' is an Angular component, then verify that it is part of this module.
2. If 'ngb-panel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
  [ERROR ->]<ngb-panel title="Simple">
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit"): ng:///StudyModule/StudyGroupsComponent.html@1:2
'ngb-panel' is not a known element:
1. If 'ngb-panel' is an Angular component, then verify that it is part of this module.
2. If 'ngb-panel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    </ng-template>
  </ngb-panel>
  [ERROR ->]<ngb-panel>
    <ng-template ngbPanelTitle>
      <span>&#9733; <b>Fancy</b> title &#9733;</span>
"): ng:///StudyModule/StudyGroupsComponent.html@11:2
'ngb-accordion' is not a known element:
1. If 'ngb-accordion' is an Angular component, then verify that it is part of this module.
2. If 'ngb-accordion' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
  <ngb-panel title="Simple">
    <ng-temp"): ng:///StudyModule/StudyGroupsComponent.html@0:0
    at syntaxError (compiler.js:2547)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:19495)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:25041)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:25028)
    at compiler.js:24971
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:24971)
    at compiler.js:24881
    at Object.then (compiler.js:2538)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:24880)

Vendor.js 有这个代码:

        NgbAccordion.decorators = [{
            type: _angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"],
            args: [{
                selector: 'ngb-accordion',
                exportAs: 'ngbAccordion',
                host: {
                    'class': 'accordion',
                    'role': 'tablist',
                    '[attr.aria-multiselectable]': '!closeOtherPanels'
                },
                template: "\n    <ng-template ngFor let-panel [ngForOf]=\"panels\">\n      <div class=\"card\">\n        <div role=\"tab\" id=\"{{panel.id}}-header\" [class]=\"'card-header ' + (panel.type ? 'bg-'+panel.type: type ? 'bg-'+type : '')\">\n          <h5 class=\"mb-0\">\n            <button type=\"button\" class=\"btn btn-link\"\n              (click)=\"toggle(panel.id)\" [disabled]=\"panel.disabled\" [class.collapsed]=\"!panel.isOpen\"\n              [attr.aria-expanded]=\"panel.isOpen\" [attr.aria-controls]=\"panel.id\">\n              {{panel.title}}<ng-template [ngTemplateOutlet]=\"panel.titleTpl?.templateRef\"></ng-template>\n            </button>\n          </h5>\n        </div>\n        <div id=\"{{panel.id}}\" role=\"tabpanel\" [attr.aria-labelledby]=\"panel.id + '-header'\"\n             class=\"collapse\" [class.show]=\"panel.isOpen\" *ngIf=\"!destroyOnHide || panel.isOpen\">\n          <div class=\"card-body\">\n               <ng-template [ngTemplateOutlet]=\"panel.contentTpl?.templateRef\"></ng-template>\n          </div>\n        </div>\n      </div>\n    </ng-template>\n  "
            }]
        }];

NgbModule 被添加到主模块。

Answer 1

如果您有子模块，您需要添加 ng-bootstrap也到那个模块。所以在 StudyModule 中，你必须导入 ng-bootstrap再次添加到 imports大批，

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
imports:[ ..., NgbModule ],

Angular 对此非常严格。