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

Question

我的应用程序中有一个通用的slickgrid组件。该slickgrid组件被添加到其他组件中。因此，当我的应用程序第一次加载时，Slickgrid可以正常工作，但是当我路由到另一个组件或回到第一个组件时，它显示为空白。如果我重新加载页面，则该页面正常工作。下面是我的代码段：

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>

每页路由后，网格变为空白。如何解决此问题

Answer 1

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

作为一种解决方案，您可以将这些id从test.components作为输入传递给home组件。

例如

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