在 Angular 6 中，当我不使用 SystemJS 时如何加载 ngx-mydatepicker？答案

【问题标题】：In Angular 6, how do I load ngx-mydatepicker when I'm not using SystemJS?在 Angular 6 中，当我不使用 SystemJS 时如何加载 ngx-mydatepicker？
【发布时间】：2018-10-30 08:50:55
【问题描述】：

我正在尝试实现以下日期选择器： https://github.com/kekeh/ngx-mydatepicker/blob/master/README.md

HTML，根据文档：

<input
  class="form-control"
  style="float:none"
  placeholder="Select a date"
  ngx-mydatepicker // throws error
  name="mydate"
  [(ngModel)]="model"
  [options]="myOptions"
  #dp="ngx-mydatepicker" 
  (dateChanged)="onDateChanged($event)"
/>

但我收到错误 There is no directive with "exportAs" set to "ngx-mydatepicker"。

根据文档，它说如果我使用 SystemJS，我应该执行以下操作：

我想这会解决我得到的错误，但我没有使用 SystemJS。我运行使用 AngularCLI 构建的 Angular 6。

在没有 SystemJS 的情况下导入/加载 ngx-mydatepicker 包的正确方法是什么？

【问题讨论】：

...嗯？ SystemJS 设置是自述文件中的第 3 点。你没有使用 SystemJS，所以你应该做第 2 点（还有第 1 点，npm install it）。
我已经完成了你提到的所有事情以及指南所说的内容，但我得到了错误，因为他们没有提供在没有 SystemJS 的情况下加载“ngx-mydatepicker”的方法。
第2点是需要的配置。然而，没有任何迹象表明该组件与 Angular 6 兼容，并且两个月没有提交。您现在可能只是运气不佳，需要使用不同的日期选择器。例如：angular materials.

标签： angular webpack datepicker systemjs

【解决方案1】：

您需要将指令公共 API 公开给您的模板。

只需进行一些更改 -

在ts中

将 exportAs 放入指令声明中。

@Directive({
 selector: '[ngx-mydatepicker]',
 exportAs: 'ngxMydatepicker'    //<-- expose to outer world.
})

在html中

input
  class="form-control"
  style="float:none"
  placeholder="Select a date"
  ngx-mydatepicker // throws error
  name="mydate"
  [(ngModel)]="model"
  [options]="myOptions"
  #dp="ngxMydatepicker"  <!-- exposed directive -->
  (dateChanged)="onDateChanged($event)"
/>

【讨论】：

【解决方案2】：

我也有同样的问题。

解决方案在 app.module.ts 我忘了把这个导入

import { NgxMyDatePickerModule } from 'ngx-mydatepicker/dist/ngx-my-date-picker.module';

这在进口方面：

[
    NgxMyDatePickerModule.forRoot()
]

【讨论】：