angular slickgrid не загружается после перенаправления страницы в Angular 7

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

Вы должны использовать разные идентификаторы в качестве свойства gridId для каждого компонента.

В качестве одного решения вы можете передать эти идентификаторы из 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 репо