У меня есть этот код:
Компонент 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>
Компонент тс:
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 .
EDIT : в документах говорится, что он поддерживает Angular 7.0.0. Я использовал 7.2. Я понизил до 7.0, но он все еще не работает. Я попытался добавить первый компонент из документов (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>★ <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 добавлен в основной модуль.