从服务器重新加载数据 angular

Question

我用 ag grid 显示 table。为了显示它，我在 app.component.ts:

中设置了 onGridReady

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

然后html构建table是这样的：

  <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["browse"] );

参数可以是public或私有的，url地址是这样的：

http://localhost:4200/experiments/public

在路由器中是这样定义的：

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

此参数允许根据在导航栏中按下的按钮从服务器获取不同的实验。

但是，考虑到该组件已经加载，它不会从服务器刷新数据。我怎样才能使数据刷新？

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。

从服务器重新加载数据 angular

Reload data from server angular

ag-grid

ag-grid-ng2

angular

angular-router