在我的Range4应用程序中,两个广泛使用的库之间有一个奇怪的交互:ng-bootstrap
(ng-自助)和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
组件是在Routes
文件中声明的router-outlet
,该文件又由RoutingModule
导入。这个RoutingModule
导入SharedModule
(两个子组件:data-selection
和metering-chart
都声明和导出),并由主AppModule
导入。
由于最初metering
的chartData
是未定义的,所以metering-chart
组件不会显示。在此期间,数据显示器就像一种魅力。
但是,只有当我单击按钮加载图表的数据和图表本身时,数据报警器的弹出容器才会变得没有响应。
我曾试图在这个问题被复制的地方制造一个柱塞,但没有用.然而,这里有一个gif展示了正在发生的事情:
如您所见,当日期直接输入到输入字段时,模型将被更新。但是,单击任何日期都不会产生任何结果。
我使用的方法如下:
Angular v. 4.0.1
angular2-highcharts v. 0.5.5
ng-bootstrap v. 1.0.0-alpha.27
我可以提供更多关于体系结构或组件交互的信息,但是有太多的信息,如果我的问题中缺少任何关键信息,请告诉我,我会提供所有信息。
发布于 2017-07-11 10:02:54
摘自Alios的答案,其中链接到ng-boostrap的GitHub问题页面:
问题不在于库之间存在错误的交互,而在于错误地创建了chart
元素。显然,它是在一个角度区域内创建的,从而触发了对每个事件处理程序的更改检测。
解决方案是从metering-chart
组件模板中删除图表创建和更新事件绑定,如下所示:
<div id="chart-container"></div>
并将图表创建、数据更新和钻取/向上事件留在角区域之外处理:
this.zone.runOutsideAngular(() => {
// Create or Update the chart
})
此外,在前面的<chart>
元素中定义的所有事件绑定都必须在组件的逻辑和选项对象中重新定义。
https://stackoverflow.com/questions/45021000
复制相似问题