angular - 错误:projects/custom-lib/src/lib/components/accordion/accordion.component.html:1:1 - 错误 NG8001:'ngb-accordion' 不是已知元素
问题描述
因此,我创建了一个Angular 库项目,我在我的应用程序源中使用它而不发布(截至目前)。
创建这个库的原因是设置一些通用组件,这些组件将通过皮肤(更改 scss)ng-bootstrap库创建,然后在应用程序的各个页面中使用。
到目前为止,我已经成功地为一些没有使用自定义标签的组件(即选项卡、日期选择器等)设置了皮肤,并且它们都按预期工作,我可以将它们导出为我的库级别模块的一部分,然后我将其导入到我的应用程序中需要的地方.
现在,我还计划对 ng-accordion 进行皮肤处理,但它与其他提供的组件不同,即它具有自定义标签<ngb-accordion>
等<ngb-panel>
。使用它会给我以下错误(在构建时),
Error: projects/custom-lib/src/lib/components/accordion/custom-lib-accordion.component.html:1:1 - error NG8001: '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.
我试过什么?
我认为这个错误的原因是在库构建过程中使用的自定义标签 angular 无法理解并最终抛出这个。因此,我已将@angular/elements
包添加到我的项目中并customElements
在ng-bootstrap
. 但是构建仍然失败并出现同样的错误。
以下是我的代码片段,
组件.html
<ngb-accordion #acc="ngbAccordion" class="custom-accordion" (panelChange)="changeArrow($event,acc)">
<ngb-panel *ngFor="let faq of faqs" id="faq-{{faq.id}}">
<ng-template ngbPanelHeader>
<h5 class="custom-accordion__title_text">{{ faq.question }}</h5>
<div class="custom-accordion__title_button">
<button class="btn btn-link p-0" ngbPanelToggle>
<ng-container *ngIf="selectedPanelId.includes(faq.id)">
<ng-container *ngIf="closeOpenedPanel">
<i class="custom-icon custom-down-icon"></i>
</ng-container>
<ng-container *ngIf="!closeOpenedPanel">
<i class="custom-icon custom-up-icon"></i>
</ng-container>
</ng-container>
<ng-container *ngIf="!selectedPanelId.includes(faq.id)">
<i class="custom-icon custom-down-icon"></i>
</ng-container>
</button>
</div>
</ng-template>
<ng-template ngbPanelContent> {{faq.answer}} </ng-template>
</ngb-panel>
</ngb-accordion>
组件.ts
import { Component, Input } from '@angular/core';
import { NgbPanelChangeEvent } from '@ng-bootstrap/ng-bootstrap';
export interface FAQ {
id: string;
question: string;
answer: string;
}
@Component({
selector: 'custom-accordion',
templateUrl: './custom-accordion.component.html',
styles: [`
@import "variables/variables";
@include custom-media(">sm") {
::ng-deep .card {
.card-header {
justify-content: space-between;
padding: 1.5rem 0;
margin-bottom: 0;
}
.card-body {
padding: 0;
}
.collapse {
&.show {
font-size: 1rem;
padding: 0 0 1.5rem 0;
margin: 0;
max-width: 70%;
}
}
}
&__title_text {
font-size: 0.875rem;
max-width: 70%;
padding-right: 0;
}
}
`],
})
export class CustomAccordionComponent {
@Input() public faqs: FAQ[];
closeOpenedPanel: boolean = false;
selectedPanelId: string = 'ngb-panel-';
constructor() { }
/**
* To change the accordion arrow direction
* we check the current active-panel (clicked/interacted)
* first and then also check whether the panel is currently open.
*/
changeArrow($event: NgbPanelChangeEvent, acc: any) {
this.selectedPanelId = $event.panelId;
if (acc.isExpanded(this.selectedPanelId)) {
this.closeOpenedPanel = true;
} else {
this.closeOpenedPanel = false;
}
}
}
module.ts - 这将导出上面创建的自定义组件。
import { Injector, NgModule } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { NgbAccordionModule, NgbAccordion, NgbAccordionConfig, NgbPanel } from '@ng-bootstrap/ng-bootstrap';
import { CustomAccordionComponent } from './custom-accordion.component';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [CommonModule, BrowserModule, NgbAccordionModule],
declarations: [CustomAccordionComponent],
entryComponents: [CustomAccordionComponent],
})
export class CustomAccordionModule {
constructor(private injector: Injector) { }
public ngDoBootstrap(): void {
const c1: any = createCustomElement(CustomAccordionComponent , { injector: this.injector });
if (!customElements.get('ngb-accordion')) {
customElements.define('ngb-accordion', c1);
}
}
}
home.page.html - 用法。
<custom-accordion [faqs]="faqs"></custom-accordion>
home.module.ts
@NgModule({
imports: [
CommonModule,
CustomModule,
ComponentsModule,
PageRoutingModule,
NgbModule,
ReactiveFormsModule,
FormsModule,
],
declarations: [...],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class HomeModule { }
不确定,我错过了什么。当在应用程序中立即使用相同的代码时,它工作得很好。因此,我确信是这个自定义ngb-accordion
标签导致了这种情况。如果你能指出来,请给我一个解决这个问题的方向。
解决方案
当您创建自定义元素(Web 组件)时,Angular 只是不知道这是您要使用的组件。
在您使用组件的模块中,您需要添加CUSTOM_ELEMENTS_SCHEMA
如下:
@NgModule({
// imports, exports, etc
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
可能您还缺少exports
在声明模块的 -array 中添加此组件
推荐阅读
- angular - docker-compose:通过 Angular 应用程序“内部”访问后端服务
- python-3.x - 安装 pyzmail 时 pip 失败,错误代码为 1
- typescript - 将依赖注入应用到给定类型的实用程序类型?
- android - “如何修复 Android Q 中的 'java.lang.IllegalArgumentException: Font has been added' 错误?”
- terraform - 如何在“terraform”中创建带有时间戳的文件?
- python-3.x - 如何在两个线程之间共享数据
- javascript - 如何生成闪亮仪表板的dashboardBody的PDF?
- ruby - 在 Ruby Treetop 中使用 elements.map 时,如何处理 0 或多个语句中的非终端节点?
- oracle - 索引很长的数字列
- c# - 我可以通过 ref return 获得列表项吗?