Angular 第 3 方库交互

Question

我的 Angular 4 应用程序中两个广泛使用的库之间存在奇怪的交互：ng-bootstrap (ng-bootstrap) and 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 包含以下 -stripped- 模板：

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

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.

由于最初 metering 的 chartData 未定义，因此 metering-chart 组件未显示。在此期间，日期选择器的工作就像一个魅力。

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

我试图创建一个 plunker 来重现问题，但无济于事...但是，这里有一个 gif 显示了发生了什么：

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

我正在使用以下内容：

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

我可以提供更多有关体系结构或组件交互的信息，但信息太多了，如果我的问题中缺少任何关键信息，请告诉我，我会提供所有信息。

Answer 1

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

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

解决方案是从 metering-chart 组件模板中删除图表创建和更新事件绑定，使其保持原样：

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

并将图表创建、数据更新和 drilldown/up 事件留在 angular 区域之外处理：

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

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

Angular 第 3 方库交互

Angular 3rd party library interaction

highcharts

typescript

bootstrap-4

ng-bootstrap

angular