角度的第三方库互动

我在我的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部件是在Routes 文件，它是依次由一个RoutingModule进口声明的router-outlet。这 RoutingModule进口SharedModule（其中两个子组件： data-selection和metering-chart宣布和导出），和由主AppModule导入。

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

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

我试图创造一个问题重现一个plunker，但无济于事......然而，这里的显示GIF这是怎么回事：

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

我使用了以下内容：

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

我可以提供关于体系结构或组件进行交互一吨多的信息，但有这么多了，如果什么重要的应该是从我的问题中遗漏，请告诉我，我会提供这一切。

来源

2017-07-10 JSG_85

在没有plunk或其他http://stackoverflow.com/help/mcve的情况下，建议解决方案的可能性非常小。如果你不能复制问题，回答者怎么做呢？ – estus

我知道困难。我希望这种互动可以激发一个更明亮，更广泛的头脑的想法...相信我，我试图复制这个问题的重拳，因为我完全理解我的问题的含糊不清。尽管如此，我希望有人对此有所了解......毕竟，Plunker并不总是...... –

Plunker并不在身边，但是依照SO规则要求MCVE，并且工作示例严重增加了机会有人会抽出一些时间来调试问题。由于这不是Angular或JS的理论问题，Highcharts/Bootstrap /不管添加太多移动部件，这不能通过单独推导来解决（有些问题可以但不是这一个）。 – estus

从Alios的回答可链接到NG-自举的GitHub的问题页面摘自：

的问题并不在于图书馆之间的互动故障，而是在一个错误的创建chart元素。显然它是在Angular Zone内部创建的，因此触发了每个事件处理程序的变化检测。

的解决方案是从metering-chart组件模板中删除图表创建&更新事件绑定，留下像这样：

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

和离开的图表创建，数据更新，并钻取/向上事件角区之外进行处理：

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

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

来源

2017-07-11 10:02:54

角度的第三方库互动

回答

相关问题