row-data内のag-grid routerlinkによってテンプレートが破損する

Question

こんにちは、ag-gridテーブル内のナビゲーションボタンに問題があります。ユーザーを別のコンポーネントにルーティングすると、表示が中断されます。

ここで、ページ上のどこかをクリックすると正しく表示されます（これは機能が正しくありません。コンポーネントの正しい着陸時に表示されることが期待されます）。以下のスクリーンショットを参照してください。 グリッドのすべての構成が行われるgrid.componentがあり、グリッドの行を編集するボタンを組み込むためにcellRendererFrameworkを実装しています。これは私の編集ボタンコンポーネントの実装です：私は、関連して、正しいルートでシンプルなハイパーリンクを表示するテンプレートを持っているこの単純なActionButtonRendererComponent内

this.columns.push({ 
    headerName: '#', 
    cellRendererFramework: ActionButtonRendererComponent, 
    field: '_actions', 
    width: 300, 
    }); 
    this.gridOptions.columnDefs = this.columns; 

<a class="btn btn-primary btn-sm mr-2 mb-2" routerLink="/to/my/route" type="button"><i aria-hidden="true" class="fa fa-edit"></i></a> 

最終結果は私のグリッドは次のように見ていますこれは： 青の編集ボタンをクリックすると、この予期しない動作が発生します（前述したように、関連するスクリーンショットを使用）。奇妙なことは、グリッドの行の外側にハイパーリンクを作成すると、同じルートが実装されていることです。/to/my/route完全に動作し、余分なクリックを必要とせずに適切なコンポーネントテンプレートを正しく読み込みます。

この動作はとても奇妙で、私の周りに頭を浮かべることはできません。どんな助けでも大歓迎です。

Answer 1

見つかったビットハッキーソウルシップ。 ランタイムをNGZOneと「同期」する必要があります。

this.ngZone.run(() => { 
    this.router.navigate([url, paramValue]); 
});