Question

我在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导入。

由于最初metering的{{1}}未定义，因此不会显示chartData组件。在此期间，datepickers的工作就像一个魅力。

但是，只有当我单击按钮加载图表的数据和图表本身时，日期选择器的弹出容器才会无响应。

我试图创建一个可以重现问题的plunker，但无济于事......但是，这里有一个显示正在发生的事情的gif：

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

我正在使用以下内容：

metering-chart Angular v. 4.0.1 angular2-highcharts v. 0.5.5

我可以提供更多有关架构或组件交互的信息，但有很多内容，如果我的问题中缺少任何重要信息，请告诉我，我会提供所有信息。

Answer 1

取自Alios的答案，链接到ng-boostrap的GitHub问题页面：

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

解决方案是删除图表创建＆amp;更新metering-chart组件模板中的事件绑定，如下所示：

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

将图表创建，数据更新和向下钻取/向上事件留在角度区域之外：

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

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

Angular第三方图书馆互动

1 个答案: