Перезагрузить данные с сервера angular
Отображаю таблицу с сетка ag. Чтобы отобразить его, у меня есть 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.getAllExperiments ( this.route.snapshot.params ["просмотр"] );
Параметр может быть публичным или частным, а его URL-адрес выглядит так:
И это определено в роутере так:
{
path: 'experiments/:browse',
component: ExperimentsListComponent,
data: { title: 'Experiments List' }
},
Этот параметр позволяет получать с сервера различные эксперименты, в зависимости от того, какая кнопка нажата на панели навигации.
Однако, учитывая, что компонент уже загружен, он не обновляет данные с сервера. Как мне обновить данные?
Ответы 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.
В этом-то и дело. Вам не нужно ничего менять. Вам просто нужно добавить это в app.component.ts, который является основой вашего приложения angular. @Paritosh
вы можете поделиться ссылкой на github для справки. кроме того, невозможно сразу определить, какие именно вещи у вас измененный