Angular 3rd Party库交互 [英] Angular 3rd party library interaction

问题描述

我在Angular 4应用程序中的两个广泛使用的库之间发生了怪异的交互: ng-bootstrap (

如您所见，当直接在输入字段中输入日期时，将更新模型.但是，单击任何日期都不会产生任何结果.

我正在使用以下内容:

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

我可以提供有关架构或组件交互的大量信息，但是有太多的信息，如果我的问题中缺少任何关键的信息，请告诉我，我将提供所有信息.

解决方案

来自Alios的答案，该答案链接到ng-boostrap的GitHub问题页面:

问题不在于库之间的错误交互，而在于 chart 元素的错误创建.显然，它是在Angular Zone中创建的，因此会触发每个事件处理程序的更改检测.

解决方案是删除图表创建和&从 metering-chart 组件模板更新事件绑定，如下所示:

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

将图表创建，数据更新和下钻/向上事件留在角度区域之外进行处理:

  this.zone.runOutsideAngular(()=> {//创建或更新图表}) 

此外，必须在组件的逻辑和选项对象内部重新定义在先前的< chart> 元素中定义的所有事件绑定.

I'm having a weird interaction between two widely used libraries inside my Angular 4 application: ng-bootstrap (ng-bootstrap) and Highcharts (Highcharts).

I have this metering component containing two child components: data-selection and metering-chart, as so:

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

Where data-selection contains the following -stripped- template:

[...]
<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>
[...]

And the metering-chart component contains:

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

The metering component is a router-outlet declared in a Routes file, which is in turn imported by a RoutingModule. This RoutingModule imports SharedModule (where both child components: data-selection and metering-chart are declared and exported), and is imported by the main AppModule.

Since initially metering's chartData is undefined, the metering-chart component is not displayed. During this time, the datepickers work like a charm.

However, it is only when I click the button to load the chart's data and the chart itself, that the datepicker's popup containers become unresponsive.

I have tried to create a plunker where the issue was reproduced, but to no avail... However, here's a gif showing what's going on:

As you can see, the model is being updated when the date is typed directly into the input field. However, clicking on any of the dates yield no result whatsoever.

I'm using the following:

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

I could provide a ton more information regarding architecture or component interaction, but there's so much of it that, if anything critical should be missing from my question, please tell me and I'll provide it all.

解决方案

Taken from Alios' answer which links to ng-boostrap's GitHub issue page:

The problem does not reside in a faulty interaction between libraries, but rather in a wrong creation of the chart element. Apparently it was being created inside an Angular Zone, thus triggering change detection on every event handler.

The solution was to remove the chart creation & update event bindings from the metering-chart component template, leaving it like so:

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

And leaving the the chart creation, data update, and drilldown/up events to be handled outside the angular zone:

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

Furthermore, all the event bindings defined in the previous <chart> element have to be redefined inside the component's logic and options object.

这篇关于Angular 3rd Party库交互的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！