繁体   English   中英

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

[英]Why don't ng-bootstrap components work as a webComponent?

我的示例项目基于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

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

如果要更改模型并同时导航,则需要以下步骤:

<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();
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM