没有将“exportAs”设置为“ngbDatepicker”的指令

Question

我正在使用 angular 4，我试图在使用 datepicker-popup.html 时添加 datepicker 我收到如下错误。我不明白这是什么类型的错误。请帮帮我。

datepicker-popup.html

<form class="form-inline">
    <div class="form-group">
        <div class="input-group">
            <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
            <div class="input-group-append">
                <button class="btn btn-outline-secondary" (click)="d.toggle()" type="button">
                    <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;" />
                </button>
            </div>
        </div>
    </div>
</form>

<hr/>
<pre>Model: {{ model | json }}</pre>

Answer 1

请在您的文件中添加这两行。

import { NgbDate, NgbModule } from '@ng-bootstrap/ng-bootstrap';

并导入 NgbModule。

imports: [NgbModule]

Answer 2

此错误意味着该#d="ngbDatepicker"库无效，因为该DatePickerComponent库的 没有exportAs设置为 的属性ngbDatepicker。

您应该打开该组件并查看 的实际值exportAs，并使用它来代替当前的模板变量。

编辑

假设您正在使用Bootstrap datepicker（从 datepicker 的名称推断），这里是组件装饰器：

@Component({
  selector: 'ngbd-datepicker',
  template: `...`
})

正如您所看到的，没有exportAs指令：这意味着您无法编写#d="ngbDatepicker"。

（如果您不使用该方法，请考虑将其作为了解组件是否具有exportAs属性的方法）

编辑2

要解决这个问题：声明一个模板变量并将其声明为视图子引用

@Component({
  selector: 'ngbd-datepicker',
  template: `...`
})

<input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="model" ngbDatepicker>

这应该有效。如果您有多个日期选择器，请命名它们以便找到它们：

@ViewChild(NgbdDatepicker) d: NgbdDatepicker;

<input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="model" ngbDatepicker #d>