BsDatepicker 没有出现在子组件中 (ngx-bootstrap)

Question

我正在使用Angular 5 ，我想使用ngx-bootstrap bsDatepicker模块。 我按照https://ngx-universal.herokuapp.com/datepicker 中的步骤操作，但 datepicker 没有出现。 我只收到控制台警告消息。 我没有收到任何错误消息

警告一次.js:10

BsDatepickerModule 正在开发中，

突破性的变化是可能的，

请阅读变更日志

日期选择器元素也未呈现

我的app.module.ts

import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
...
imports: [
   ... ,
   BsDatepickerModule.forRoot(),
   ... ,
],

我的custom.component.html

  <div class="col-md-6">
     <input type="text" class="form-control" placeholder="Datepicker" bsDatepicker formControlName="date" />
  </div>

我还将bsDatepicker css 文件的 CDN 链接添加到我的index.html

<link rel="stylesheet" href="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css">

ngx-bootstrap、Angular 和 Bootstrap 的版本：

• ngx 引导程序：^2.0.2
• 角度：5.2.7
• 引导程序：3.3.7

构建系统：

• 角 CLI：1.7.2
• 网络包：3.11.0
• 打字稿：2.4.2

Answer 1

该问题有两种解决方案。 您应该根据应用程序的架构做出此决定。 如果你只有一个带有几个子组件的较小的应用程序，那么只需将BsDatepickerModule.forRoot()添加到子组件的导入中。 如果您有一个更大的应用程序，或者一个会随着时间的推移而增长的应用程序，那么最好的解决方案是将BsDatepickerModule.forRoot()添加到您的导入和BsDatepickerModule在您的Shared Module 的导出中。 如果你没有共享模块（你应该这样做），那么检查这个和这个。

大型应用解决方案（最佳）

import { BsDatepickerModule } from 'ngx-bootstrap';

@NgModule({
imports: [
    .....
    BsDatepickerModule.forRoot(),
    .....
  ],
exports: [
    .....
    BsDatepickerModule,
    .....
   ]
})

小型应用程序解决方案（好但不是最好的）

import { BsDatepickerModule } from 'ngx-bootstrap';

@NgModule({
imports: [
    .....
    BsDatepickerModule.forRoot(),
    .....
  ]

Answer 2

我找到了解决办法。

错误或问题是：我将BsDatepickerModule.forRoot()添加到我的app.module.ts但它适用于app.compontent.html 。 我不能在加载了lazyLoading子组件中使用它， BsDatepickerModule.forRoot()不适用于所有组件。 我不知道怎么了。

临时解决方案：

我将BsDatepickerModule.forRoot()添加到我想在其中使用BsDatepickerModule.forRoot()子组件中。 这暂时解决了我的问题。

Answer 3

在 .angular-cli.json 文件中添加样式 URL

"styles": ["../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"],

在 app.module.ts 中导入模块

import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';

@NgModule({
imports: [
    .....
    CarouselModule.forRoot(),
    .....
  ]
})

在 .html 文件中添加日期控件

<div  class="form-group">
            <input type="text" class="form-control" placeholder="Datepicker" bsDatepicker formControlName="date" />
          </div>

它对我有用

Answer 4

<link rel="stylesheet" href="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css">

我将 CDN 链接添加到index.htm的样式表。 它工作正常。