Взаимодействие со сторонней библиотекой Angular

У меня странное взаимодействие между двумя широко используемыми библиотеками внутри моего приложения Angular 4: ng-bootstrap (ng- bootstrap) и Highcharts (Highcharts).

У меня есть этот компонент metering, содержащий два дочерних компонента: data-selection и metering-chart, а именно:

<div>
    <data-selection (selectedEntities)="onSelectedData()"></data-selection>
    <button (click)="loadMeteringData()">Load Data</button>
    <metering-chart *ngIf="chartData" [chartData]="chartData"></metering-chart>
</div>

Где data-selection содержит следующий разделенный- шаблон:

[...]
<form class="form-inline">
    <div class="form-group">
        [...]
        <div class="input-group">
            <input class="form-control" 
                   placeholder="yyyy-mm-dd" 
                   name="dpStart" 
                   [(ngModel)]="startDateModel" 
                   ngbDatepicker 
                   #startDate="ngbDatepicker">
            <div class="input-group-addon" 
                 (click)="startDate.toggle()">
                <i class="fa fa-calendar"></i>
            </div>
            [...]
        </div>
    </div>
</form>
[...]

А компонент metering-chart содержит:

<chart [options]="options" 
    (load)="createChartObject($event.context)"
    (drilldown)="drilledDown($event)"
    (drillup)="drilledUp($event)" style="width:100%; display: inline-block; "></chart>

Компонент metering представляет собой компонент router-outlet, объявленный в файле Routes, который, в свою очередь, импортируется компонентом RoutingModule. Этот RoutingModule импортирует SharedModule (где оба дочерних компонента: data-selection и metering-chart объявляются и экспортируются) и импортируется основным AppModule.

Поскольку изначально значение chartData для metering не определено, компонент metering-chart не отображается. В это время средства выбора даты работают как часы.

Однако только когда я нажимаю кнопку, чтобы загрузить данные диаграммы и саму диаграмму, всплывающие контейнеры средства выбора даты перестают отвечать на запросы.

Я пытался создать плункер, в котором проблема воспроизводилась, но безрезультатно... Однако вот gif, показывающий, что происходит:

Странное взаимодействие с библиотекой

Как видите, модель обновляется, когда дата вводится непосредственно в поле ввода. Однако нажатие на любую из дат не дает никакого результата.

Я использую следующее:

Angular v. 4.0.1 angular2-highcharts v. 0.5.5 ng-bootstrap v. 1.0.0-alpha.27

Я мог бы предоставить массу дополнительной информации об архитектуре или взаимодействии компонентов, но ее так много, что, если в моем вопросе не будет чего-то критического, пожалуйста, сообщите мне, и я предоставлю все это.


typescript angular bootstrap-4 highcharts ng-bootstrap
person Nelladel    schedule 10.07.2017    source источник
comment
Очень маловероятно, что здесь можно предложить решение без планка или другого stackoverflow.com/help/mcve . Если вы не можете воспроизвести проблему, как ответчик может это сделать?   -  person Estus Flask    schedule 11.07.2017
comment
Я знаю о трудности. Я надеялся, что такое взаимодействие может зажечь какую-то идею в более ясном, более широком уме... Поверьте мне, я пытался воспроизвести проблему на плункере, так как прекрасно понимал двусмысленность моего вопроса. Тем не менее, я надеялся, что кто-то прольет свет на этот вопрос... В конце концов, Плункер не всегда был рядом...   -  person Nelladel    schedule 11.07.2017
comment
Plunker не существовало, но MCVE требуется по правилам SO, и работающий пример серьезно увеличивает шансы найти кого-то, кто потратит некоторое время на отладку проблемы. Поскольку это не теоретический вопрос Angular или JS, а Highcharts/Bootstrap/что-то еще добавляют слишком много движущихся частей, это нельзя решить только дедукцией (некоторые вопросы могут, но не этот).   -  person Estus Flask    schedule 11.07.2017

Ответы (1)


arrow_upward
2
arrow_downward

Взято из ответа Алиоса, который ссылается на страницу проблемы ng-boostrap GitHub:

Проблема заключается не в неправильном взаимодействии между библиотеками, а в неправильном создании элемента chart. По-видимому, он создавался внутри Angular Zone, что вызывало обнаружение изменений в каждом обработчике событий.

Решение состояло в том, чтобы удалить привязки событий создания и обновления диаграммы из шаблона компонента metering-chart, оставив его таким:

<div id="chart-container"></div>

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

this.zone.runOutsideAngular(() => {
    // Create or Update the chart
})

Кроме того, все привязки событий, определенные в предыдущем элементе <chart>, должны быть переопределены внутри объекта логики и опций компонента.

person Nelladel    schedule 11.07.2017