我正在尝试将一些不同的外部库集成到我自己的组件中,以用作我正在构建的仪表板的一部分。为简单起见,我尝试制作一个 Angular 元素,其中包含折线图、图形量表,然后是一些更多信息作为概览项。
我在这个简单的例子中使用了 ngx-charts。我已经获取了 ngx-charts 样本编号卡,并将样本中的 html 放入我的主要 overview-item.component.html 中。将示例 typescript 代码添加到 overview-item.component.ts 后,一切正常,包括我的测试应用程序。
<p>overview-item works!</p>
<ngx-charts-number-card
[view]="view"
[scheme]="colorScheme"
[results]="results"
(select)="onSelect($event)">
</ngx-charts-number-card>
这有效并在我的页面上绘制了样本。我现在正试图将一些代码从主文件中移出,放入可以重复使用的组件中,而这些组件本身目前没有模块文件。
overview-item.component.html 不再有,但将包含生成的组件,即 .如果我从 HTML 中删除 ,并插入一个新生成的没有图表的图表,它仍然有效。
<p>overview-item works!</p>
<my-number-card></my-number-card>
我的号码卡.component.html
<p>my-number-card works!</p>
请注意,我没有更改模块或测试文件中的导入或任何其他内容,我只是移动了代码。
概览-item.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { NumberCardModule } from '@swimlane/ngx-charts';
import { MyNumberCardComponent } from './my-number-card/my-number-card.component';
@NgModule({
declarations: [
MyNumberCardComponent
OverviewItemComponent
],
exports: [OverviewItemComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
NumberCardModule,
NgxChartsModule
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA,
NO_ERRORS_SCHEMA
]
})
export class OverviewItemModule { }
编辑 添加了 my-number.component.ts
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'overview-item',
template: `
<ngx-charts-number-card
[view]="view"
[scheme]="colorScheme"
[results]="results"
(select)="onSelect($event)">
</ngx-charts-number-card>
`
})
export class OverviewItemComponent implements OnInit {
view = [700, 200];
colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C']
};
results = [
{ "name": 'Germany', 'value': 8940000 },
{ 'name': 'USA', 'value': 5000000 },
{ 'name': 'France', 'value': 7200000 }
];
constructor() { }
onSelect(event) {
console.log(event);
}
ngOnInit() { }
}
现在,当我将 的 html 添加到我的号码卡 HTML 和 Typescript 文件中时,问题就出现了。
当我这样做时,overview-item.component.spec.ts 文件现在会报错:
Failed: Template parse errors:
Can't bind to 'view' since it isn't a known property of 'ngx-charts-number-card'.
1. If 'ngx-charts-number-card' is an Angular component and it has 'view' input, then verify that it is part of this module.
2. If 'ngx-charts-number-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
<ngx-charts-number-card
[ERROR ->][view]="view"
[scheme]="colorScheme"
[results]="results"
"): ng:///DynamicTestModule/SLSAverageGaugeComponent.html@5:2
Can't bind to 'scheme' since it isn't a known property of 'ngx-charts-number-card'.
1. If 'ngx-charts-number-card' is an Angular component and it has 'scheme' input, then verify that it is part of this module.
2. If 'ngx-charts-number-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
除了导入了MyNumberCardComponent,测试文件没有变化,现在它被移动到主组件的子目录和组件中。
import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { NumberCardModule } from '@swimlane/ngx-charts';
import { MyNumberCardComponent } from './my-number-card/my-number-card.component';
describe('OverviewItemComponent', () => {
let component:OverviewItemComponent;
let fixture:ComponentFixture<OverviewItemComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
MyNumberCardComponent,
OverviewItemComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
NumberCardModule,
NgxChartsModule
],
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(OverviewItemComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create component', () => {
expect(component).toBeTruthy();
});
});
我添加了引用错误的模式,但它们没有帮助。另一个问题是错误与方括号中引用的所有可以传递的值有关。
我确定我在做一些愚蠢的事情,但我似乎无法克服这个问题。我的代码在父组件中时有效,但使用 ng generate component
添加子组件似乎不起作用。
最佳答案
View 是您包装在您自己的组件中的组件的一个属性,因此您需要通过对包装组件的 view 属性的引用来提供它,或者创建您自己的名为 view 的本地属性并将其传递到包装的组件。
关于带有组件的 Angular7 元素出现架构错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54816384/