BsDatepicker 未显示在子组件中 (ngx-bootstrap)

Question

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

warn-once.js:10

BsDatepickerModule is under development,

BREAKING CHANGES are possible,

PLEASE, read changelog

日期选择器元素也未呈现

我的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 link 到我的 index.html

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

ngx-bootstrap、Angular 和 Bootstrap 的版本：

ngx-bootstrap: ^2.0.2
Angular: 5.2.7
Bootstrap: 3.3.7

构建系统：

Angular命令行界面：1.7.2
网络包：3.11.0
打字稿：2.4.2

Answer 1

我找到了解决办法。

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

临时解决方案:

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

Answer 2

在 .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 3

这个问题有两种解决方法。您应该根据应用程序的架构做出此决定。如果您的应用程序较小且只有几个子组件，则只需将 BsDatepickerModule.forRoot() 添加到子组件的导入即可。如果您有一个更大的应用程序，或者一个会随着时间的推移而增长的应用程序，那么最好的解决方案是将 BsDatepickerModule.forRoot() 添加到您的导入中，并在您的 共享模块[的导出中添加 BsDatepickerModule =26=]。如果您没有共享模块（您应该有），请查看this and this。

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

import { BsDatepickerModule } from 'ngx-bootstrap'; @NgModule({ imports: [ ..... BsDatepickerModule.forRoot(), ..... ], exports: [ ..... BsDatepickerModule, ..... ] })

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

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

Answer 4

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

我在 index.htm 中将 CDN link 添加到样式 sheet 中。它工作正常。

BsDatepicker 未显示在子组件中 (ngx-bootstrap)

BsDatepicker doesn't show up in Children Components (ngx-bootstrap)

datepicker

typescript

ngx-bootstrap

angular

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

在app.module.ts

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