angular slickgrid 在 Angular 7 中的页面路由后未加载

Question

我的应用程序中有一个通用的 slickgrid 组件。这个 slickgrid 组件被添加到其他组件中。所以当我的应用程序第一次加载时，Slickgrid 工作正常，但是当我路由到另一个组件或返回到第一个组件时，它显示空白。如果我重新加载页面，它会工作 properly.Below 是我的代码片段：

grid.component.ts:

columnDefinitions: Column[];
gridOptions1: GridOption;
dataset1: any[];

ngOnInit(): void {
this.columnDefinitions = [
  {id: 'title', name: 'Title', field: 'title', sortable: true},
  {id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true},
  {id: '%', name: '% Complete', field: 'percentComplete', sortable: true},
  {id: 'start', name: 'Start', field: 'start'},
  {id: 'finish', name: 'Finish', field: 'finish'},
  {id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true}
];
this.gridOptions1 = {
  enableAutoResize: true,
  enableSorting: true
};

this.mockData();
}

mockData() {
  // mock a dataset
  const mockDataset = [];
  for (let i = 0; i < 20; i++) {
   const randomYear = 2000 + Math.floor(Math.random() * 10);
   const randomMonth = Math.floor(Math.random() * 11);
   const randomDay = Math.floor((Math.random() * 29));
   const randomPercent = Math.round(Math.random() * 100);

  mockDataset[i] = {
    id: i,
    title: 'Task ' + i,
    duration: Math.round(Math.random() * 100) + '',
    percentComplete: randomPercent,
    start: `${randomMonth}/${randomDay}/${randomYear}`,
    finish: `${randomMonth}/${randomDay}/${randomYear}`,
    effortDriven: (i % 5 === 0)
  };
}

this.dataset1 = mockDataset;
}

grid.component.html:

<angular-slickgrid gridId="grid1"
               [columnDefinitions]="columnDefinitions"
               [gridOptions]="gridOptions1"
               [dataset]="dataset1"
               gridHeight="300"
               gridWidth="800">
</angular-slickgrid>

test1.component.html:

<app-grid #commonGrid >

</app-grid>

test2.component.html:

 <app-grid #commonGrid >

</app-grid>

app.component.html:

   <a routerLink="test">Test</a>
   <a routerLink="test1">Test1</a>
   <router-outlet></router-outlet>

每次页面路由后，网格去blank.How解决这个问题

Answer 1

您必须为每个组件使用不同的 ID 作为 gridId 属性。

作为一种解决方案，您可以将这些 ID 作为输入从 test.components 传递到您的主页组件。

例如

home.component.html: adpat gridId <angular-slickgrid gridId="{{gridId}}" ...

home.component.ts: 添加输入@Input() gridId: string;

test.component.ts: 添加gridId 属性 gridId = "gridId1"

test1.component.ts: 添加gridId 属性 gridId = "gridId2"

testX.component.html：适应 html 绑定 <app-home [gridId]="gridId"></app-home>

编辑：我将更改上传到 git repo

angular slickgrid 在 Angular 7 中的页面路由后未加载

angular slickgrid not loading after page routing in Angular 7

angular

slickgrid