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



我的示例项目基于基本日期选择器示例。

作为一个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();
}

相关内容

  • 没有找到相关文章

最新更新