Question

我的示例项目基于Basic Date Picker Example。

作为Angular应用，一切正常。但是，如果我使用此代码构建有角度的Web组件，则以下功能将无法正常工作：

导航到下个月或上个月
选择“今天”按钮示例
月份/年份选择框的更改

例如：如果我将console.log输出放入selectToday（）按钮方法中，则会显示该消息，但不会突出显示实际的日期。另外，如果我单击一天，则NgbDateStruct的模型不会填充。

Output: 
Month: 10.2018
Model: empty!?

可以通过下载来复制：

https://stackblitz.com/edit/angular-jejk1u

要构建webComponent，必须激活以下代码行：

    please activate/uncomment the lines in app.module:
    - the constructor
    - 'entryComponents: ...' instead of 'bootstrap: ...'

之后，您可以构建和打包Web组件，并使用http://localhost:8080

在http服务器上启动它

//build, package
npm run build && npm run package
// to start the http server 
npm run serve

另一个示例是日历组件。同样，如果将导航实现为webComponent，则导航将不起作用。可以在此处下载一个示例：

https://stackblitz.com/edit/angular-bootstrap-calendar

下载-取消注释app.module行-构建-打包-在http服务器上运行webComponent

Answer 1

这是设计使然，导航到一个月不会改变模型

如果要更改模型并同时导航，将需要以下提示：

<ngb-datepicker #dp [(ngModel)]="model" (navigate)="date = $event.next"></ngb-datepicker>    
<button class="btn btn-sm btn-outline-primary mr-2" (click)="selectToday(dp)">Select Today</button>

在您的控制器中

selectToday(dp) {
   this.model = this.calendar.getToday();
   dp.navigateTo();
}

为什么ng-bootstrap组件不能作为webComponent工作？

1 个答案: