現在の動作
内部にボタンがある 1 つの列を持つ ngx-datatable を作成しました。データテーブルを使用してルートをロードすると、このボタンのクリックが正常に機能します。このボタンが行うことは、クリックされた要素の別の「詳細ページ」へのルートです。
しかし、同じルートをロードして最初にデータテーブルをスクロールし、その後同じボタンをクリックすると、機能しなくなります。ルートは変わりません。しかし、ブラウザの前のボタンをクリックしてから進むボタンをクリックすると、「DetailPage」が表示されます。
画像とコード
したがって、最初の画像は、ngx-datatable を使用して新たにロードされたコンポーネントを示しています。ボタン (赤でマーク) をクリックすると、ルーターは別のページにルーティングされ、正常に動作します (画像 2 を参照)。
ただし、アプリケーションを再実行し、コンポーネントがロードされた後に少し下にスクロールすると (画像 3 を参照)。同じボタンはもう機能しませんが、上記のトリックを実行すると (最初に前をクリックしてからブラウザー ナビゲーションで次に進む)、必要なルートが読み込まれます。
新しくロードされたコンポーネントとスクロールされた 結果 スクロール後にクリックすると得られる結果
ボタンクリックで実行されるメソッド:
goToDetailOfWearable(wearable: ResultWearable) {
this.resultService.sendResultWearableToService(wearable);
this.router.navigateByUrl('Home/ProcessCategory/Processes/Activities/Result/Details'); }
wearable パラメーターは行です。最初の行はこの行をサービスに送信し、2 行目は「詳細ページ」にルーティングします。