ngx-bootstrap datepicker does not work

Question

我正在學習angular2和bootstrap4。我的公司使用以下網站。 http://valor-software.com/ngx-bootstrap/#/datepicker 日曆顯示，但如果我點擊某件事，什麼也沒有發生。 我不知道爲什麼該網站無法移動。你能幫我嗎？

* app.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> 

* 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 { 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 
    ], 
    imports: [ 
    DatepickerModule.forRoot(), ButtonsModule.forRoot(), TypeaheadModule.forRoot(), PaginationModule.forRoot(), ModalModule.forRoot(), BsDropdownModule.forRoot(), BrowserModule, FormsModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

* app.component.ts：

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

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.scss'] 
}) 
export class AppComponent { 
    title = 'app'; 
} 
export class DemoDropdownBasicLinkComponent { 
    public items: string[] = ['The first choice!', 
    'And another choice for you.', 'but wait! A third!']; 

    public onHidden(): void { 
    console.log('Dropdown is hidden'); 
    } 
    public onShown(): void { 
    console.log('Dropdown is shown'); 
    } 
    public isOpenChange(): void { 
    console.log('Dropdown state is changed'); 
    } 
} 
export class DemoButtonsRadioComponent { 
    public radioModel: string = 'Middle'; 
} 
export class DemoButtonsBasicComponent { 
    public singleModel: string = '1'; 
} 
export class DemoButtonsDisabledComponent { 
    public disabled: boolean = true; 

} 
export class DatepickerDemoComponent { 
    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()); 
    } 
} 

Answer 1

的基本規則angular：模板中使用的所有方法和值應位於它所指的組件中。

對於您的情況，app.component.html正在AppComponent中引用。並且您指的是您在DatepickerDemoComponent中定義的方法。

無論您在app.component.ts中導出多少個類，但該模板只能從其上具有@Component註釋的類訪問模型和方法。

例如：該模板嘗試在AppComponent類中查找getDate（）方法，因爲它沒有任何此類方法會引發錯誤。您可以在瀏覽器控制檯中看到它。

嘗試將所有在按鈕和DatePicker組件中定義的方法和模型移動到AppComponent。它應該工作。