[英]Angular7 Element with Components getting Schema error
我試圖將一些各種外部庫集成到我自己的組件中,以用作要構建的儀表板的一部分。 為簡單起見,我嘗試制作一個具有折線圖,圖形量規和一些其他信息的Angular元素,作為概述項目。
我在此簡單示例中使用ngx-charts。 我已經拿了ngx-charts樣本編號卡,並將樣本中的html放入我的主overview-item.component.html中。 將示例打字稿代碼添加到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>
我的號碼,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的本地屬性並將其傳遞給被包裝的組件。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.