3

我有一个包含多个组件和模块的角度应用程序。在这里，我试图简化和最小化结构以帮助理解问题。
应用结构 

-app
  -Core
    -donut-card
      -donut-card-component.html
      -donut-card-component.spec.ts
      -donut-card-component.ts
     -core.module.ts
  -app.module.ts
  -......
  -......

甜甜圈-card.component.html

<div class="card-pf" *ngIf="donutConfig && chartData">
  <!-- If a titleLink is provided, wrap the h2 with an anchor tag -->
  <a *ngIf="titleLink; else cardTitle" [routerLink]="titleLink">
    <ng-container *ngTemplateOutlet="cardTitle"></ng-container>
  </a>
  <ng-template #cardTitle>
    <h2 class="card-pf-title">{{ chartTitle }}</h2>
  </ng-template>

  <p class="card-pf-utilization-details"></p>
  <div class="card-pf-body">
    <pfng-donut-chart [chartData]=chartData
                      [config]=donutConfig>
    </pfng-donut-chart>
  </div>
</div>

donut-card.component.spec.ts


import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';

import { DonutCardComponent } from './donut-card.component';

describe('DonutCardComponent', () => {
  let component: DonutCardComponent;
  let fixture: ComponentFixture<DonutCardComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [ DonutCardComponent ]
    })
    .compileComponents();

    fixture = TestBed.createComponent(DonutCardComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

甜甜圈-card.component.ts

import { Component, Input } from '@angular/core';
import { DonutChartConfig } from 'patternfly-ng/chart';

@Component({
  selector: 'ssc-donut-card',
  templateUrl: './donut-card.component.html'
})
export class DonutCardComponent {
  @Input() chartTitle: string;
  @Input() titleLink: Array<string>;
  @Input() donutConfig: DonutChartConfig;
  @Input() chartData: Array<any>;
}

核心模块.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

import { DonutCardComponent } from './donut-card/donut-card.component';

@NgModule({
  imports: [
    BrowserModule,
    DonutChartModule,
    RouterModule
  ],
  declarations: [
    DonutCardComponent
  ],
  exports: [
    DonutCardComponent
  ]
})
export class CoreModule {}

app.module.ts 

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

由于整个应用程序中的属性绑定问题，单元测试失败。我已经提到了相当少的解决方案和堆栈溢出可用的检查，但到目前为止对我没有任何帮助。 

    Failed: Template parse errors:
    Can't bind to 'chartTitle' since it isn't a known property of 'ssc-donut-card'.
    1. If 'ssc-donut-card' is an Angular component and it has 'chartTitle' input, then verify that it is part of this module.
    2. If 'ssc-donut-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. ("<ssc-donut-card
      [ERROR ->][chartTitle]="chartTitle"
      [titleLink]="titleLink"
      [chartData]="chartData"
    "): ng:///DynamicTestModule/ScoresDonutCardComponent.html@1:2
    Can't bind to 'titleLink' since it isn't a known property of 'ssc-donut-card'.
    1. If 'ssc-donut-card' is an Angular component and it has 'titleLink' input, then verify that it is part of this module.
    2. If 'ssc-donut-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. ("<ssc-donut-card
      [chartTitle]="chartTitle"
      [ERROR ->][titleLink]="titleLink"
      [chartData]="chartData"
      [donutConfig]="donutConfig"
    "): ng:///DynamicTestModule/ScoresDonutCardComponent.html@2:2
    Can't bind to 'chartData' since it isn't a known property of 'ssc-donut-card'.
    1. If 'ssc-donut-card' is an Angular component and it has 'chartData' input, then verify that it is part of this module.
    2. If 'ssc-donut-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. ("
      [chartTitle]="chartTitle"
      [titleLink]="titleLink"
      [ERROR ->][chartData]="chartData"
      [donutConfig]="donutConfig"
</ssc-donut-card>
    "): ng:///DynamicTestModule/ScoresDonutCardComponent.html@3:2
    Can't bind to 'donutConfig' since it isn't a known property of 'ssc-donut-card'.
    1. If 'ssc-donut-card' is an Angular component and it has 'donutConfig' input, then verify that it is part of this module.
    2. If 'ssc-donut-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. ("
      [titleLink]="titleLink"
      [chartData]="chartData"
      [ERROR ->][donutConfig]="donutConfig"
</ssc-donut-card>
    "): ng:///DynamicTestModule/ScoresDonutCardComponent.html@4:2
    'ssc-donut-card' is not a known element:
    1. If 'ssc-donut-card' is an Angular component, then verify that it is part of this module.
    2. If 'ssc-donut-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<ssc-donut-card
      [chartTitle]="chartTitle"
      [titleLink]="titleLink"
    "): ng:///DynamicTestModule/ScoresDonutCardComponent.html@0:0
4

0 回答 0