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

Question

我正在尝试为 angular2 bootstrap 日期选择器编写一个解决方法，当用户在外部单击时关闭日期选择器。

我在注册外部点击并在此处翻转布尔标志的地方工作：

@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;
        } 
    }

}

唯一的问题是，我不知道如何才能关闭日期选择器。我需要从标记中调用 close() 方法，因为那是声明我的日期选择器的地方。

这是带有注释的标记：

<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>

我的日期选择器对象在 HTML 标记中声明为 d，并且在打字稿中注册了外部点击。这些外部点击将我的布尔标志翻转为 false。

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

Answer 1

获取组件的引用，然后对其调用关闭

@ViewChild(NgbDatePicker) popup:NgbdDatepickerPopup;

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

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

Answer 2

黑客攻击黑客攻击

我不确定我是否为这个解决方案感到自豪，但这整个问题的出现是因为 Angular2 Bootstrap 日期选择器不支持这种行为。

我是这样做的：

首先，根据布尔标志复制 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 上，一旦点击发生，它会给出日期选择器关闭的外观。然后布尔标志被重置为真，这样用户就可以无缝地再次打开它。

这里是组件代码：

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;
}

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

Angular2 html markup bind to boolean flag and call method when false

typescript

ng-bootstrap

angular