进行测试时，出现以下错误。任何人都可以帮助我解决此问题。我没有任何合适的答案。
这是错误：
Failed: Template parse errors:
Can't bind to 'view' since it isn't a known property of 'ibo-calendar-header'.
1. If 'ibo-calendar-header' is an Angular component and it has 'view' input, then verify that it is part of this module.
2. If 'ibo-calendar-header' 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. ("<div class="container-fluid site-content">
<ibo-calendar-header [ERROR ->][(view)]="view" [(viewDate)]="viewDate"></ibo-calendar-header>
<context-menu #basicMenu>
"): ng:///DynamicTestModule/IboCalendarComponent.html@2:22
Can't bind to 'viewDate' since it isn't a known property of 'ibo-calendar-header'.
1. If 'ibo-calendar-header' is an Angular component and it has 'viewDate' input, then verify that it is part of this module.
2. If 'ibo-calendar-header' 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. ("<div class="container-fluid site-content">
这是我的组件文件：
import { Component, OnInit, ChangeDetectionStrategy, Input, Output, EventEmitter, OnChanges, ViewEncapsulation } from '@angular/core';
import { FormGroup, FormBuilder } from "@angular/forms";
import { CalendarService } from "./../../services/calendar.service";
import { ModelEvent, EventState } from "./../../models/model.event";
import { CalendarEvent } from 'angular-calendar';
import { Observable, Subject } from 'rxjs';
import { colors } from "./../../utilities/colors";
import { tap } from 'rxjs/operators';
declare var $:any;
@Component({
selector: 'ibo-calendar',
templateUrl: './ibo-calendar.component.html',
styleUrls: ['./ibo-calendar.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
})
export class IboCalendarComponent implements OnChanges,OnInit {
view: string = 'month';
// viewDate: Date = new Date('August 19, 2018');
viewDate:Date = new Date()
@Input() events:ModelEvent[];
@Input() currentEvent: ModelEvent;
@Input() userName:string;
@Output() eventAdded = new EventEmitter<ModelEvent>();
@Output() eventDeleted = new EventEmitter<ModelEvent>();
@Output() eventUpdated = new EventEmitter<ModelEvent>();
refresh: Subject<any> = new Subject();
removeEvent:ModelEvent;
eventForm:FormGroup;
selectedEvent:ModelEvent;
constructor(private fb:FormBuilder) { }
ngOnInit() {
this.eventForm = this.fb.group({Title:''});
const headerHeight = $('.site-header').outerHeight();
//moving content down to header
$('body').css({paddingTop: headerHeight});
}
ngOnChanges() {
if( this.currentEvent ) {
this.viewDate = new Date(this.currentEvent.Start);
}
}
eventClicked({ event }: { event: CalendarEvent }): void {
console.log('Event clicked', event);
}
addEvent(date:Date):void {
const newEvent = {
Id : 0,
Start : new Date(date),
Title : 'New Event on ' + date,
AllDay : false,
ColorId:3,
End : new Date(date),
CreatedBy:this.userName,
CreatedDate:new Date(date),
UpdatedBy:null,
UpdatedDate:null
}
console.log('created entry is', newEvent);
this.eventAdded.emit(newEvent);
}
setCurrentEvent(event:ModelEvent) {
this.currentEvent = event;
this.eventForm.patchValue({
Title : this.currentEvent.Title
});
}
updateEvent(event):void {
console.log('this.currentEvent', this.currentEvent);
const updateEvent = {
...this.currentEvent,
...this.eventForm.value,
UpdatedBy:this.userName
};
this.eventUpdated.emit(updateEvent);
}
deleteEvent(event:ModelEvent):void {
this.eventDeleted.emit(event);
}
}
这是我的html：
<div class="container-fluid site-content">
<ibo-calendar-header [(view)]="view" [(viewDate)]="viewDate"></ibo-calendar-header>
<context-menu #basicMenu>
<ng-template contextMenuItem (execute)="addEvent($event.item)">
Add event
</ng-template>
</context-menu>
<ng-template
#monthCellTemplate
let-day="day"
let-openDay="openDay"
let-locale="locale"
let-tooltipPlacement="tooltipPlacement"
let-highlightDay="highlightDay"
let-unhighlightDay="unhighlightDay"
let-eventClicked="eventClicked"
>
<div
class="fill-height"
[contextMenu]="basicMenu"
[contextMenuSubject]="day.date"
>
<div class="cal-cell-top">
<span class="cal-day-badge" *ngIf="day.badgeTotal > 0"
>{{ day.badgeTotal }}</span
>
<span class="cal-day-number"
>{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span
>
</div>
<div class="cal-events">
<div
class="cal-event"
*ngFor="let event of day.events"
(mouseenter)="highlightDay.emit({event: event})"
(mouseleave)="unhighlightDay.emit({event: event})"
[mwlCalendarTooltip]="event.Title | calendarEventTitle:'monthTooltip':event"
[tooltipPlacement]="tooltipPlacement"
(click)="$event.stopPropagation(); eventClicked.emit({event: event})"
>
</div>
<div *ngFor="let event of day.events" class="event-shortInfo">
<span>{{event.Title}}</span>
<span>
{{event.Start | date: 'dd/MM/yyyy'}}
({{event.Start | date:'shortTime'}})
</span>
</div>
</div>
</div>
</ng-template>
<ng-template
#weekHeaderTemplate
let-days="days"
let-locale="locale"
let-dayHeaderClicked="dayHeaderClicked"
>
<div class="cal-day-headers">
<div
class="cal-header"
*ngFor="let day of days"
[class.cal-past]="day.isPast"
[class.cal-today]="day.isToday"
[class.cal-future]="day.isFuture"
[class.cal-weekend]="day.isWeekend"
(click)="dayHeaderClicked.emit({day: day})"
[contextMenu]="basicMenu"
[contextMenuSubject]="day.date"
>
<b>{{ day.date | calendarDate:'weekViewColumnHeader':locale }}</b><br />
<span
>{{ day.date | calendarDate:'weekViewColumnSubHeader':locale }}</span
>
</div>
</div>
</ng-template>
<ng-template #dayHourSegmentTemplate let-segment="segment" let-locale="locale">
<div
class="cal-hour-segment"
[ngClass]="segment.cssClass"
[contextMenu]="basicMenu"
[contextMenuSubject]="segment.date"
>
<div [hidden]="!segment.isStart" class="cal-time">
{{ segment.date | calendarDate:'dayViewHour':locale }}
</div>
</div>
</ng-template>
<div class="alert alert-info">
Click on a day on the view.
<strong *ngIf="clickedDate">You clicked on this day: {{ clickedDate | date:'medium' }}</strong>
</div>
<div>
<div [ngSwitch]="view">
<mwl-calendar-month-view
*ngSwitchCase="'month'"
[viewDate]="viewDate"
[events]="events | upper2Lower"
[refresh]="refresh"
[cellTemplate]="monthCellTemplate"
(eventClicked)="eventClicked($event)"
(dayClicked)="clickedDate = $event.day.date">
</mwl-calendar-month-view>
<mwl-calendar-week-view
*ngSwitchCase="'week'"
[viewDate]="viewDate"
[events]="events"
[refresh]="refresh"
[headerTemplate]="weekHeaderTemplate"
(eventClicked)="eventClicked($event)"
(dayHeaderClicked)="clickedDate = $event.day.date">
</mwl-calendar-week-view>
<mwl-calendar-day-view
*ngSwitchCase="'day'"
[viewDate]="viewDate"
[events]="events"
[refresh]="refresh"
[hourSegmentTemplate]="dayHourSegmentTemplate"
(eventClicked)="eventClicked($event)">
</mwl-calendar-day-view>
</div>
</div>
<ul class="list-group">
<li class="list-group-item"
*ngFor="let event of events" [ngClass]="{'active':event.Id === currentEvent?.Id }">
{{event.Title}} <br> {{event.CreatedBy}}
<div style="border:1px solid red;">{{event.Start}} :: {{event.End}}</div>
<button type="button" class="btn btn-primary" (click)="setCurrentEvent(event)">Edit</button>
<form (ngSubmit)="updateEvent(event)" [formGroup]="eventForm" *ngIf="event.Id === currentEvent?.Id">
<input type="text"
placeholder="Name (required)"
formControlName="Title" >
<button class="btn btn-primary">Update</button>
</form>
<button
(click)="deleteEvent(event)"
type="button" class="btn btn-danger">Delete</button>
</li>
</ul>
</div>
这是我的spec.ts文件：（出现错误的地方）
import { Component, EventEmitter, OnInit, Output, Input } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { IboCalendarComponent } from './ibo-calendar.component';
import { CalendarShellComponent } from './../../containers/calendar-shell/calendar-shell.component';
describe('IboCalendarComponent', () => {
let component: IboCalendarComponent;
let fixture: ComponentFixture<IboCalendarComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ IboCalendarComponent, CalendarShellComponent ],
imports:[CalendarModule]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(IboCalendarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
如何测试这种情况，如何在此处编写测试？ 有人以正确的方式指导我吗？
更新 这是我的日历模块：（所有导入都在这里发生）
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from "@angular/common/http";
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { ContextMenuModule } from 'ngx-contextmenu';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { reducerCalendar } from "./state/calendar.reducer";
import { EffectsEvents } from "./state/calendar.effects";
import { IboCalendarComponent } from './components/ibo-calendar/ibo-calendar.component';
import { IboCalendarHeaderComponent } from './ibo-calendar-header/ibo-calendar-header.component';
import { CalendarShellComponent } from './containers/calendar-shell/calendar-shell.component';
import { SharedModule } from "./../shared-components/shared.module";
import { Upper2Lower } from "./../pipes/caseTransform";
const iboCalenderRoutes: Routes = [
{ path: 'iboCalendar', component: CalendarShellComponent }
];
@NgModule({
declarations: [
IboCalendarComponent,
IboCalendarHeaderComponent,
CalendarShellComponent,
Upper2Lower
],
imports: [
CommonModule,
BrowserAnimationsModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
SharedModule,
CalendarModule.forRoot({
provide: DateAdapter,
useFactory: adapterFactory
}),
ContextMenuModule.forRoot({
useBootstrap4: true
}),
RouterModule.forChild(iboCalenderRoutes),
EffectsModule.forFeature([EffectsEvents]),
StoreModule.forFeature('reducerCalendar', reducerCalendar)
],
exports: [ ]
})
export class iboCalendarModule { }