角度のあるサードパーティのライブラリのやりとり

Question

私のAngular 4アプリケーション内で広く使用されている2つのライブラリ：ng-bootstrap（ng-bootstrap）とHighcharts（Highcharts）の間には、奇妙なやりとりがあります。ように、data-selectionとmetering-chart：

は、私は2つの子コンポーネントを含むこのmeteringコンポーネントを持っているdata-selectionには、以下が含まれ

<div> 
    <data-selection (selectedEntities)="onSelectedData()"></data-selection> 
    <button (click)="loadMeteringData()">Load Data</button> 
    <metering-chart *ngIf="chartData" [chartData]="chartData"></metering-chart> 
</div> 

からは剥奪 - テンプレート：

[...] 
<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成分はRoutingModuleによってインポート順にあるRoutes ファイルで宣言さrouter-outletあります。この RoutingModule輸入SharedModule（両方の子コンポーネント： data-selectionとmetering-chartが宣言され、輸出されている）、そして はメイン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

私の質問から抜けて、私に教えてください。私はそれをすべて提供します。問題は、ライブラリ間の相互作用の不良ではなく、むしろchart要素の誤った作成に存在しない

：

Answer 1

はNG-ブートストラップのGitHubの発行ページにリンクAlios'答えから撮影します。明らかに、Angular Zone内で作成されていたため、すべてのイベントハンドラの変更検出がトリガされていました。のチャート作成、データの更新、およびドリルダウン/アップイベントを

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

そして去る：

ソリューションはそうのようにそれを残して、metering-chartコンポーネントテンプレートからチャート作成&更新イベントのバインディングを削除しました角度ゾーンの外側に取り扱うこと：

さらに

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

、前<chart>要素で定義されたすべてのイベント・バインディングは、コンポーネントのロジックの内部に再定義されなければならないとオプションオブジェクト。