Перезагрузить данные с сервера угловой

Question

Я отображаю таблицу с ag grid .Для того, чтобы отобразить его, у меня есть onGridReady в app.component.ts:

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    this.gridApi.sizeColumnsToFit();
    this.rowData = this.api.getAllExperiments(
      this.route.snapshot.params["browse"]
    );
  }

Тогда HTML для построения таблицы выглядит следующим образом:

  <ag-grid-angular 
    #agGrid 
    id="myGrid" 
    style="width: 100%; height: 500px;" 
    class="ag-theme-balham" 
    [rowData]="rowData | async"
    [enableSorting]="true" 
    [animateRows]="true" 
    [floatingFilter]="true" 
    [enableColResize]="true" 
    [pagination]="true"
    [columnDefs]="columnDefs"
    [sortingOrder]="sortingOrder"
    (rowClicked)='onRowClicked($event)'
    (gridReady)="onGridReady($event)">
  </ag-grid-angular>

Это работает правильно.

Как вы можете видеть, чтобы получить данные с сервера, я вызываю свою службу с учетом параметра в URL-адресе, например:

this.rowData =this.api.getAllExperiment (this.route.snapshot.params ["browse"]);

Параметр может быть открытым или закрытым, а адрес URL выглядит так:

http://localhost:4200/experiments/public

И он определяется в маршрутизаторе следующим образом:

  {
    path: 'experiments/:browse',
    component: ExperimentsListComponent,
    data: { title: 'Experiments List' }
  },

Этот параметр позволяет получать различные эксперименты с сервера в зависимости от того, какая кнопка нажата вthe nav-bar.

Однако, учитывая, что компонент уже загружен, он не обновляет данные с сервера.Как я могу сделать обновление данных?

Answer 1

Я нашел ответ на GitHub. Нет необходимости менять компоненты, маршрутизатор или что-то еще. Единственное, что нужно добавить, это в ngOnInit () в app.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{
  constructor(public router: Router,) { }

  ngOnInit(){
    this.router.routeReuseStrategy.shouldReuseRoute = function(){
      return false;
  };

  this.router.events.subscribe((evt) => {
      if (evt instanceof NavigationEnd) {
          this.router.navigated = false;
          window.scrollTo(0, 0);
      }
  });

  }
}

Ответ найден на GitHub благодаря mihaicux2.