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に移動してみてください。それは動作するはずです。