Question

我正在尝试编写angular2 bootstrap datepicker的解决方法，当用户点击外部时会关闭datepicker。

我让它在注册外部的地方工作，并在这里翻转一个布尔标志：

@Component({
    selector: 'ngbd-datepicker-popup',
    templateUrl: 'app/component/datepicker/datepicker.html',
    host: {
        '(document:click)': 'handleClick($event)'
    }
})

export class NgbdDatepickerPopup {

    private showDatePicker: boolean = true;


    constructor(private elementRef: ElementRef) {}



    handleClick(event: any) {
        if (!this.elementRef.nativeElement.contains(event.target)) {
            this.showDatePicker = false;
        } 
    }

}

唯一的问题是，我不知道该怎么办才能关闭datepicker。我需要从标记中调用close()方法，因为这是我的datepicker声明的地方。

以下是带注释的标记：

<form class="form-inline" bindToBooleanFlagHere="d.close()"> <!--if true, close the popup --!>
    <div class="form-group">
        <div class="input-group">
            <input type="text" style="z-index: 0;" readOnly class="form-control" placeholder="mm-dd-yyyy" firstDayOfWeek="1"
               name="dp" [(ngModel)]="date" (ngModelChange)="dateChange(date)" ngbDatepicker #d="ngbDatepicker"> <!-- datepicker declared here --!>
            <div *ngIf="!disableThis" class="input-group-addon" style="background-color: white; cursor: pointer" (click)="d.toggle()">
                <i class="glyphicon calendar"></i>
            </div>
        </div>
    </div>
</form>

我的datepicker对象在HTML标记中声明为d，外部点击在typescript中注册。这些外部点击将我的布尔标志翻转为假。

所以我需要我的html来观看这个布尔标志，并在d.close()为假时调用showDatePicker方法。

Answer 1

黑客入侵黑客攻击

我不确定我是否为这个解决方案感到自豪，但是整个问题都出现了，因为Angular2 Bootstrap Datepickers不支持这种行为。

所以这就是我所做的：

首先，基于布尔标志的重复html标记。

<form class="form-inline" *ngIf="showDatePicker">
    <div class="form-group">
        <div class="input-group">
            <input type="text" style="z-index: 0;" readOnly class="form-control" placeholder="mm-dd-yyyy" firstDayOfWeek="1"
                   name="dp" [(ngModel)]="date" (ngModelChange)="dateChange(date)" ngbDatepicker #d="ngbDatepicker">
            <div *ngIf="date != null" class="input-group-addon" style="background-color: white; cursor: pointer" (click)="clearDate()"><i class="glyphicon remove"></i>
            </div>
            <div *ngIf="!disableThis" class="input-group-addon" style="background-color: white; cursor: pointer" (click)="d.toggle()">
                <i class="glyphicon calendar"></i>
            </div>
            <div *ngIf="disableThis" class="input-group-addon" style="background-color: white; cursor: pointer">
                <i class="glyphicon calendar"></i>
            </div>
        </div>
    </div>
</form>
<form *ngIf="!showDatePicker" class="form-inline" (mousemove)="d.close(); resetShowDatePicker();">
    <div class="form-group">
        <div class="input-group">
            <input type="text" style="z-index: 0;" readOnly class="form-control" placeholder="mm-dd-yyyy" firstDayOfWeek="1"
                   name="dp" [(ngModel)]="date" (ngModelChange)="dateChange(date)" ngbDatepicker #d="ngbDatepicker">
            <div *ngIf="date != null" class="input-group-addon" style="background-color: white; cursor: pointer" (click)="clearDate()">
                <i class="glyphicon remove"></i>
            </div>
            <div *ngIf="!disableThis" class="input-group-addon" style="background-color: white; cursor: pointer" (click)="d.toggle()">
                <i class="glyphicon calendar"></i>
            </div>
            <div *ngIf="disableThis" class="input-group-addon" style="background-color: white; cursor: pointer">
                <i class="glyphicon calendar"></i>
            </div>
        </div>
    </div>
</form>

当showDatePicker为false时，mousemove上会发生关闭功能，一旦点击发生，就会关闭日期选择器的外观。然后将布尔标志重置为true，以便用户可以无缝地再次打开它。

以下是组件代码：

handleClick(event: any) {
    if (this.elementRef.nativeElement.parentElement.contains(event.target) ||
        event.target.className === 'glyphicon calendar') {
        // glyphicon calendar is the class name of the button icon that opens the datepicker
        this.showDatePicker = true;
    } else {
        this.showDatePicker = false;
    }
}

resetShowDatePicker(): void {
    this.showDatePicker = true;
}

Answer 2

获取组件的引用，然后在其上调用close

@ViewChild(NgbDatePicker) popup:NgbdDatepickerPopup;

handleClick() {
  if (!this.elementRef.nativeElement.contains(event.target)) {
     this.popup.close();
  } 
}

我不确定@ViewChild()行是否正确，因为我不完全理解您的代码。

Angular2 html标记绑定到布尔标志，并在false时调用方法

2 个答案: