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 7 Bootstrap指令不加载

1 个答案: