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

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事件更改为，则无效

(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提示