1

我已经问过以下问题。 ngx-bootstrap datepicker 不起作用 现在我面临一个新问题。我分离了文件，出现了新的错误。/Users/ /my-app4/src/app/app.component.ts (2,10) 中的错误：模块 '"/Users/ /my-app4/src/app/datepicker/datepicker.component"' 没有导出成员“日期选择器模块”。

你可以帮帮我吗？

app.component.ts

import { Component } from '@angular/core';
import { DatepickerModule } from './datepicker/datepicker.component';



@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
}

app.module.ts

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

import { AppComponent } from './app.component';
import { DatepickerModule } from 'ngx-bootstrap/datepicker';
import { DatepickerComponent } from './datepicker/datepicker.component';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ModalModule } from 'ngx-bootstrap/modal';
import { PaginationModule } from 'ngx-bootstrap/pagination';
import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { FormsModule } from '@angular/forms';




@NgModule({
  declarations: [
    AppComponent,
    DatepickerComponent
  ],
  imports: [
    DatepickerModule.forRoot(), ButtonsModule.forRoot(), TypeaheadModule.forRoot(), PaginationModule.forRoot(), ModalModule.forRoot(), BsDropdownModule.forRoot(), BrowserModule, FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

./datepicker/datepicker.component.html

<style>
  .full button span {
    background-color: limegreen;
    border-radius: 32px;
    color: black;
  }
  .partially button span {
    background-color: orange;
    border-radius: 32px;
    color: black;
  }
</style>

<div>
  <div class="card">
    <pre class="card-block card-header">Selected date is: <em *ngIf="dt">{{ getDate() | date:'fullDate'}}</em></pre>
  </div>
  <h4>Inline</h4>
  <div style="display:inline-block; min-height:290px;">
    <datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true" [dateDisabled]="dateDisabled"></datepicker>
  </div>

  <hr />
  <button type="button" class="btn btn-sm btn-info" (click)="today()">Today</button>
  <button type="button" class="btn btn-sm btn-default btn-secondary" (click)="d20090824();">2009-08-24</button>
  <button type="button" class="btn btn-sm btn-danger" (click)="clear()">Clear</button>
  <button type="button" class="btn btn-sm btn-default btn-secondary" (click)="toggleMin()" tooltip="After today restriction">Min date</button>
  <button type="button" class="btn btn-sm btn-default btn-secondary" (click)="disableTomorrow()">Disable Tomorrow</button>
</div>

./datepicker/datepicker.component.ts

import { Component } from '@angular/core';
import * as moment from 'moment';

@Component({
  selector: 'datepicker',
  templateUrl: './datepicker.component.html'
})
export class DatepickerComponent {
  public dt: Date = new Date();
  public minDate: Date = void 0;
  public events: any[];
  public tomorrow: Date;
  public afterTomorrow: Date;
  public dateDisabled: {date: Date, mode: string}[];
  public formats: string[] = ['DD-MM-YYYY', 'YYYY/MM/DD', 'DD.MM.YYYY',
    'shortDate'];
  public format: string = this.formats[0];
  public dateOptions: any = {
    formatYear: 'YY',
    startingDay: 1
  };
  private opened: boolean = false;

  public constructor() {
    (this.tomorrow = new Date()).setDate(this.tomorrow.getDate() + 1);
    (this.afterTomorrow = new Date()).setDate(this.tomorrow.getDate() + 2);
    (this.minDate = new Date()).setDate(this.minDate.getDate() - 1000);
    (this.dateDisabled = []);
    this.events = [
      {date: this.tomorrow, status: 'full'},
      {date: this.afterTomorrow, status: 'partially'}
    ];
  }

  public getDate(): number {
    return this.dt && this.dt.getTime() || new Date().getTime();
  }

  public today(): void {
    this.dt = new Date();
  }

  public d20090824(): void {
    this.dt = moment('2009-08-24', 'YYYY-MM-DD')
      .toDate();
  }

  public disableTomorrow(): void {
    this.dateDisabled = [{date: this.tomorrow, mode: 'day'}];
  }

  // todo: implement custom class cases
  public getDayClass(date: any, mode: string): string {
    if (mode === 'day') {
      let dayToCheck = new Date(date).setHours(0, 0, 0, 0);

      for (let event of this.events) {
        let currentDay = new Date(event.date).setHours(0, 0, 0, 0);

        if (dayToCheck === currentDay) {
          return event.status;
        }
      }
    }

    return '';
  }

  public disabled(date: Date, mode: string): boolean {
    return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
  }

  public open(): void {
    this.opened = !this.opened;
  }

  public clear(): void {
    this.dt = void 0;
    this.dateDisabled = undefined;
  }

  public toggleMin(): void {
    this.dt = new Date(this.minDate.valueOf());
  }
}
4

1 回答 1

1

您在 app.component.ts 中导入了DatepickerModule而不是DatepickerComponent。

import { DatepickerModule } from './datepicker/datepicker.component';

将其更改为 DatepickerComponent。

然而你可能会得到另一个错误。

在自定义选择器之前将app作为前缀始终是一个好习惯。在我们的例子中， datepicker 选择器将与 ngx-bootstrap 发生冲突并再次引发错误。因此，将 DatepickerComponent 的选择器更改为app-datepicker应该可以正常工作。不要忘记更新 app.component.html 中的选择器。

于 2017-06-23T07:36:34.720 回答