我有这段代码：
组件 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并已加载。
我错过了什么？ 文档说您只需要将导入添加到ngModule中。
编辑：文档说它支持Angular 7.0.0，而我正在使用7.2。我已经降级到7.0，但它仍然不起作用。我尝试从文档中添加第一个组件（手风琴）现在出现了这个错误（下拉菜单没有可见的指示它正在运行）：
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>★ <b>Fancy</b> title ★</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被添加到主模块中。
"bootstrap": "^4.2.1"是package.json文件中的一个包。 - jcubic