首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >角第三方库交互作用

角第三方库交互作用
EN

Stack Overflow用户
提问于 2017-07-10 20:26:42
回答 1查看 729关注 0票数 0

在我的Range4应用程序中,两个广泛使用的库之间有一个奇怪的交互:ng-bootstrap (ng-自助)和Highcharts (高图集)。

我有一个metering组件,包含两个子组件:data-selectionmetering-chart,如下所示:

代码语言:javascript
运行
复制
<div>
    <data-selection (selectedEntities)="onSelectedData()"></data-selection>
    <button (click)="loadMeteringData()">Load Data</button>
    <metering-chart *ngIf="chartData" [chartData]="chartData"></metering-chart>
</div>

其中data-selection包含以下已剥离的模板:

代码语言:javascript
运行
复制
[...]
<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组件包含:

代码语言:javascript
运行
复制
<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-selectionmetering-chart都声明和导出),并由主AppModule导入。

由于最初meteringchartData是未定义的,所以metering-chart组件不会显示。在此期间,数据显示器就像一种魅力。

但是,只有当我单击按钮加载图表的数据和图表本身时,数据报警器的弹出容器才会变得没有响应。

我曾试图在这个问题被复制的地方制造一个柱塞,但没有用.然而,这里有一个gif展示了正在发生的事情:

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

我使用的方法如下:

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

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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-07-11 10:02:54

摘自Alios的答案,其中链接到ng-boostrap的GitHub问题页面:

问题不在于库之间存在错误的交互,而在于错误地创建了chart元素。显然,它是在一个角度区域内创建的,从而触发了对每个事件处理程序的更改检测。

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

代码语言:javascript
运行
复制
<div id="chart-container"></div>

并将图表创建、数据更新和钻取/向上事件留在角区域之外处理:

代码语言:javascript
运行
复制
this.zone.runOutsideAngular(() => {
    // Create or Update the chart
})

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

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/45021000

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档