Question

我正在使用ngx-bootstrap的bsDatepicker设置日期选择器，演示显示它的设置如下：

<input bsDatepicker #dp="bsDatepicker">
<button (click)="dp.toggle()">Toggle</button>

这很好我理解这里发生了什么并且它工作正常，但对我来说我不需要输入，我只想将指令直接放在按钮上，以便当切换时，datepicker出现在它下面这样：

<button bsDatepicker #dp="bsDatepicker" (click)="dp.toggle()">Toggle</button>

当我点击按钮时，如果我将点击事件更改为

，则无效

(click)="this.toggle()"

然后datepicker现在可以正常工作，但是控制台中出现错误“_co.toggle（）不是函数”

我想我并没有以正确的方式解决这个问题，并希望得到任何提示。

Answer 1

好的我觉得这样比较好 -

HTML：

<div class="date-picker-wrapper">
    <button class="btn"  (click)="dp.toggle()" >Date Range</button>
    <input type="text"
           bsDatepicker
           #dp="bsDatepicker">
</div>

CSS：

.date-picker-wrapper {
    display: inline-block;
    position: relative;
    input {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        border: none;
        padding: 0;
        height: 0;    
    }
}

因此，这会导致日期选择器从中心的按钮下降，我有输入来保存值，感谢@Claies提示

Angular指令，我是否正确地采取行动？

1 个答案: