Элемент Angular7 с компонентами, получающими ошибку схемы - PullRequest
Новая
       29

Элемент Angular7 с компонентами, получающими ошибку схемы

0 голосов
/ 22 февраля 2019

Я пытаюсь интегрировать несколько различных внешних библиотек в свой собственный компонент для использования в качестве части инструментальной панели, которую я создаю.Для простоты я пытаюсь создать угловой элемент с линейной диаграммой, графическим индикатором и дополнительной информацией в качестве элемента обзора.

В этом простом примере я использую диаграммы ngx.Я взял карточку с номером образца ngx-charts и поместил html для примера в свой основной файл review-item.component.html.С помощью образца машинописного кода, добавленного в review-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>

my-number-card.component.html 

<p>my-number-card works!</p>

Обратите внимание, чтоЯ не изменил импорт или что-либо еще в модуле или тестовых файлах, я просто перемещаю код.

Overview-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 { }

EDIT Добавлен 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, похоже, не работает.

1 Ответ

0 голосов
/ 28 февраля 2019

Представление - это свойство компонента, который вы оборачиваете внутри своего собственного компонента, поэтому вам нужно либо предоставить его через ссылку на свойство представления обернутого компонента, либо создать собственное локальное свойство с именем view и передать его в обернутый объект.компонент.

...