我正在尝试将ionic2-calendar(或整个事件)的一部分直接导入ionic
页面。我要导入的d.ts
文件如下所示:
... npm_modules / ionic2日历/ monthview.d.ts :
import { OnInit, OnChanges, EventEmitter, SimpleChanges, TemplateRef } from '@angular/core';
import { Slides } from 'ionic-angular';
import { ICalendarComponent, IEvent, IMonthView, IMonthViewRow, ITimeSelected, IRange, CalendarMode, IDateFormatter } from './calendar';
import { CalendarService } from './calendar.service';
import { IMonthViewDisplayEventTemplateContext } from "./calendar";
export declare class MonthViewComponent implements ICalendarComponent, OnInit, OnChanges {
private calendarService;
slider: Slides;
monthviewDisplayEventTemplate: TemplateRef<IMonthViewDisplayEventTemplateContext>;
monthviewInactiveDisplayEventTemplate: TemplateRef<IMonthViewDisplayEventTemplateContext>;
monthviewEventDetailTemplate: TemplateRef<IMonthViewDisplayEventTemplateContext>;
formatDay: string;
formatDayHeader: string;
formatMonthTitle: string;
eventSource: IEvent[];
startingDayMonth: number;
showEventDetail: boolean;
noEventsLabel: string;
autoSelect: boolean;
markDisabled: (date: Date) => boolean;
locale: string;
dateFormatter: IDateFormatter;
dir: string;
lockSwipeToPrev: boolean;
lockSwipes: boolean;
onRangeChanged: EventEmitter<IRange>;
onEventSelected: EventEmitter<IEvent>;
onTimeSelected: EventEmitter<ITimeSelected>;
onTitleChanged: EventEmitter<string>;
views: IMonthView[];
currentViewIndex: number;
selectedDate: IMonthViewRow;
range: IRange;
mode: CalendarMode;
direction: number;
private moveOnSelected;
private inited;
private callbackOnInit;
private currentDateChangedFromParentSubscription;
private eventSourceChangedSubscription;
private formatDayLabel;
private formatDayHeaderLabel;
private formatTitle;
constructor(calendarService: CalendarService);
ngOnInit(): void;
ngOnDestroy(): void;
ngOnChanges(changes: SimpleChanges): void;
ngAfterViewInit(): void;
onSlideChanged(): void;
move(direction: number): void;
createDateObject(date: Date): IMonthViewRow;
static getDates(startDate: Date, n: number): Date[];
getViewData(startTime: Date): IMonthView;
getHighlightClass(date: IMonthViewRow): string;
getRange(currentDate: Date): IRange;
onDataLoaded(): void;
refreshView(): void;
getTitle(): string;
private compareEvent(event1, event2);
select(viewDate: IMonthViewRow): void;
slideView(direction: number): void;
updateCurrentView(currentViewStartDate: Date, view: IMonthView): void;
eventSelected(event: IEvent): void;
}
在我的页面中,我将其导入:
import { MonthViewComponent } from 'ionic2-calendar/monthview';
然后我输出MonthViewComponent
以查看它的样子:
console.log(JSON.stringify(MonthViewComponent));
输出:
undefined
我这样做是为了在我的页面中使用一个方法,它是MonthViewComponent
的一部分。我还尝试导入NgCalendarModule
ionic2-calendar
,它是undefined
的主要模块,输出为MonthViewComponent
。如何使用页面内typings.json
模块中的方法?
我尝试将其作为模块添加到typings install
,然后运行MonthViewComponent
并创建了一个包含所有{
"globalDependencies": {
"JIC": "file:./src/assets/JIC.d.ts",
},
"dependencies": {
"debug": "registry:npm/debug#2.0.0+20170504163145",
"MonthViewComponent": "file:./node_modules/ionic2-calendar/monthview.d.ts"
}
}
内容的index.d.ts文件,它仍然返回undefined:
typings.json
// Generated by typings
// Source: node_modules/ionic2-calendar/calendar.d.ts
declare module '~MonthViewComponent/calendar' {
import { EventEmitter, OnInit, TemplateRef } from '@angular/core';
import { CalendarService } from '~MonthViewComponent/calendar.service';
export interface IEvent {
allDay: boolean;
endTime: Date;
startTime: Date;
title: string;
}
export interface IRange {
startTime: Date;
endTime: Date;
}
export interface IView {
}
export interface IDayView extends IView {
allDayEvents: IDisplayAllDayEvent[];
rows: IDayViewRow[];
}
export interface IDayViewRow {
events: IDisplayEvent[];
time: Date;
}
export interface IMonthView extends IView {
dates: IMonthViewRow[];
dayHeaders: string[];
}
export interface IMonthViewRow {
current?: boolean;
date: Date;
events: IEvent[];
hasEvent?: boolean;
label: string;
secondary: boolean;
selected?: boolean;
disabled: boolean;
}
export interface IWeekView extends IView {
dates: IWeekViewDateRow[];
rows: IWeekViewRow[][];
dayHeaders: string[];
}
export interface IWeekViewDateRow {
date: Date;
events: IDisplayEvent[];
}
export interface IWeekViewRow {
events: IDisplayEvent[];
time: Date;
}
export interface IDisplayEvent {
endIndex: number;
endOffset?: number;
event: IEvent;
startIndex: number;
startOffset?: number;
overlapNumber?: number;
position?: number;
}
export interface IDisplayAllDayEvent {
event: IEvent;
}
export interface ICalendarComponent {
currentViewIndex: number;
direction: number;
eventSource: IEvent[];
getRange: {
(date: Date): IRange;
};
getViewData: {
(date: Date): IView;
};
mode: CalendarMode;
range: IRange;
views: IView[];
onDataLoaded: {
(): void;
};
onRangeChanged: EventEmitter<IRange>;
}
export interface ITimeSelected {
events: IEvent[];
selectedTime: Date;
disabled: boolean;
}
export interface IMonthViewDisplayEventTemplateContext {
view: IView;
row: number;
col: number;
}
export interface IMonthViewEventDetailTemplateContext {
selectedDate: ITimeSelected;
noEventsLabel: string;
}
export interface IDateFormatter {
formatMonthViewDay?: {
(date: Date): string;
};
formatMonthViewDayHeader?: {
(date: Date): string;
};
formatMonthViewTitle?: {
(date: Date): string;
};
formatWeekViewDayHeader?: {
(date: Date): string;
};
formatWeekViewTitle?: {
(date: Date): string;
};
formatWeekViewHourColumn?: {
(date: Date): string;
};
formatDayViewTitle?: {
(date: Date): string;
};
formatDayViewHourColumn?: {
(date: Date): string;
};
}
export type CalendarMode = 'day' | 'month' | 'week';
export type QueryMode = 'local' | 'remote';
export enum Step {
QuarterHour = 15,
HalfHour = 30,
Hour = 60,
}
export class CalendarComponent implements OnInit {
private calendarService;
private locale;
currentDate: Date;
eventSource: IEvent[];
calendarMode: CalendarMode;
formatDay: string;
formatDayHeader: string;
formatDayTitle: string;
formatWeekTitle: string;
formatMonthTitle: string;
formatWeekViewDayHeader: string;
formatHourColumn: string;
showEventDetail: boolean;
startingDayMonth: number;
startingDayWeek: number;
allDayLabel: string;
noEventsLabel: string;
queryMode: QueryMode;
step: Step;
autoSelect: boolean;
markDisabled: (date: Date) => boolean;
monthviewDisplayEventTemplate: TemplateRef<IMonthViewDisplayEventTemplateContext>;
monthviewInactiveDisplayEventTemplate: TemplateRef<IMonthViewDisplayEventTemplateContext>;
monthviewEventDetailTemplate: TemplateRef<IMonthViewEventDetailTemplateContext>;
weekviewAllDayEventTemplate: TemplateRef<IDisplayAllDayEvent>;
weekviewNormalEventTemplate: TemplateRef<IDisplayEvent>;
dayviewAllDayEventTemplate: TemplateRef<IDisplayAllDayEvent>;
dayviewNormalEventTemplate: TemplateRef<IDisplayEvent>;
dateFormatter: IDateFormatter;
dir: string;
scrollToHour: number;
preserveScrollPosition: boolean;
lockSwipeToPrev: boolean;
lockSwipes: boolean;
onCurrentDateChanged: EventEmitter<Date>;
onRangeChanged: EventEmitter<IRange>;
onEventSelected: EventEmitter<IEvent>;
onTimeSelected: EventEmitter<ITimeSelected>;
onTitleChanged: EventEmitter<string>;
private _currentDate;
private hourParts;
private currentDateChangedFromChildrenSubscription;
constructor(calendarService: CalendarService, locale: string);
ngOnInit(): void;
ngOnDestroy(): void;
rangeChanged(range: IRange): void;
eventSelected(event: IEvent): void;
timeSelected(timeSelected: ITimeSelected): void;
titleChanged(title: string): void;
loadEvents(): void;
}
}
declare module 'MonthViewComponent/calendar' {
export * from '~MonthViewComponent/calendar';
}
// Generated by typings
// Source: node_modules/ionic2-calendar/calendar.service.d.ts
declare module '~MonthViewComponent/calendar.service' {
import { Observable } from 'rxjs/Observable';
import { ICalendarComponent, CalendarMode, QueryMode } from '~MonthViewComponent/calendar';
export class CalendarService {
queryMode: QueryMode;
currentDateChangedFromParent$: Observable<Date>;
currentDateChangedFromChildren$: Observable<Date>;
eventSourceChanged$: Observable<void>;
private _currentDate;
private currentDateChangedFromParent;
private currentDateChangedFromChildren;
private eventSourceChanged;
constructor();
setCurrentDate(val: Date, fromParent?: boolean): void;
readonly currentDate: Date;
rangeChanged(component: ICalendarComponent): void;
private getStep(mode);
getAdjacentCalendarDate(mode: CalendarMode, direction: number): Date;
getAdjacentViewStartTime(component: ICalendarComponent, direction: number): Date;
populateAdjacentViews(component: ICalendarComponent): void;
loadEvents(): void;
}
}
declare module 'MonthViewComponent/calendar.service' {
export * from '~MonthViewComponent/calendar.service';
}
// Generated by typings
// Source: node_modules/ionic2-calendar/monthview.d.ts
declare module '~MonthViewComponent/monthview' {
import { OnInit, OnChanges, EventEmitter, SimpleChanges, TemplateRef } from '@angular/core';
import { Slides } from 'ionic-angular';
import { ICalendarComponent, IEvent, IMonthView, IMonthViewRow, ITimeSelected, IRange, CalendarMode, IDateFormatter } from '~MonthViewComponent/calendar';
import { CalendarService } from '~MonthViewComponent/calendar.service';
import { IMonthViewDisplayEventTemplateContext } from '~MonthViewComponent/calendar';
export class MonthViewComponent implements ICalendarComponent, OnInit, OnChanges {
private calendarService;
slider: Slides;
monthviewDisplayEventTemplate: TemplateRef<IMonthViewDisplayEventTemplateContext>;
monthviewInactiveDisplayEventTemplate: TemplateRef<IMonthViewDisplayEventTemplateContext>;
monthviewEventDetailTemplate: TemplateRef<IMonthViewDisplayEventTemplateContext>;
formatDay: string;
formatDayHeader: string;
formatMonthTitle: string;
eventSource: IEvent[];
startingDayMonth: number;
showEventDetail: boolean;
noEventsLabel: string;
autoSelect: boolean;
markDisabled: (date: Date) => boolean;
locale: string;
dateFormatter: IDateFormatter;
dir: string;
lockSwipeToPrev: boolean;
lockSwipes: boolean;
onRangeChanged: EventEmitter<IRange>;
onEventSelected: EventEmitter<IEvent>;
onTimeSelected: EventEmitter<ITimeSelected>;
onTitleChanged: EventEmitter<string>;
views: IMonthView[];
currentViewIndex: number;
selectedDate: IMonthViewRow;
range: IRange;
mode: CalendarMode;
direction: number;
private moveOnSelected;
private inited;
private callbackOnInit;
private currentDateChangedFromParentSubscription;
private eventSourceChangedSubscription;
private formatDayLabel;
private formatDayHeaderLabel;
private formatTitle;
constructor(calendarService: CalendarService);
ngOnInit(): void;
ngOnDestroy(): void;
ngOnChanges(changes: SimpleChanges): void;
ngAfterViewInit(): void;
onSlideChanged(): void;
move(direction: number): void;
createDateObject(date: Date): IMonthViewRow;
static getDates(startDate: Date, n: number): Date[];
getViewData(startTime: Date): IMonthView;
getHighlightClass(date: IMonthViewRow): string;
getRange(currentDate: Date): IRange;
onDataLoaded(): void;
refreshView(): void;
getTitle(): string;
private compareEvent(event1, event2);
select(viewDate: IMonthViewRow): void;
slideView(direction: number): void;
updateCurrentView(currentViewStartDate: Date, view: IMonthView): void;
eventSelected(event: IEvent): void;
}
}
declare module 'MonthViewComponent/monthview' {
export * from '~MonthViewComponent/monthview';
}
declare module 'MonthViewComponent' {
export * from '~MonthViewComponent/monthview';
}
创建 typings / modules / MonthViewComponent / index.d.ts
List<CategoryGroupWordCountVM> categoryGroups;
我还需要做些什么来告诉Ionic / Angular2链接这个?感谢