Почему компоненты ng-bootstrap не работают как веб-компонент? - PullRequest
Новая
       14

Почему компоненты ng-bootstrap не работают как веб-компонент?

0 голосов
/ 04 октября 2018

Мой пример проекта основан на примере Basic Date Picker.

В приложении Angular все работает отлично.Но если я создаю угловой веб-компонент с этим кодом, следующие функции не работают:

  • переход к следующему или предыдущему месяцу
  • пример кнопки выбора сегодня
  • изменения в поле выбора месяца / года

Например: если я поместил выходные данные 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: ...'

После этого вы можете собрать и упаковать веб-компонент и запустить его на http-сервере с помощью http://localhost:8080

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

Другой пример:календарный компонент.Опять же, навигация не работает, если она реализована как веб-компонент.Пример этого можно скачать здесь:

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

download - раскомментировать строки app.module - build - package - запустить веб-компонент на http-сервере

1 Ответ

0 голосов
/ 04 октября 2018

Это по замыслу, переход на месяц не меняет модель

, если вы хотите изменить модель и перейти одновременно, вам понадобится: 

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