在Angular 7中的页面路由后未加载angular slickgrid [英] angular slickgrid not loading after page routing in Angular 7

问题描述

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

I have a common slickgrid component in my app. This slickgrid component is added inside others component. So when my app is loading for the First time,Slickgrid working properly, but when I route to another component or came back to the first component, it's displaying blank. If I reload the page, it's working properly.Below is my code snippet:

grid.component.ts:

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:

grid.component.html:

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

test1.component.html:

test1.component.html:

<app-grid #commonGrid >

</app-grid>

test2.component.html:

test2.component.html:

 <app-grid #commonGrid >

</app-grid>

app.component.html:

app.component.html:

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

每次页面路由后，网格都变为空白.如何解决此问题

After every page routing,the grid goes blank.How to solve this problem

推荐答案

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

You have to use different ids as gridId property for each component.

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

As one solution you can pass these ids from the test.components to your home component as input.

例如

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

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

home.component.ts:添加输入 @Input()gridId:字符串；

home.component.ts: add input @Input() gridId: string;

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

test.component.ts: add gridId property gridId = "gridId1"

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

test1.component.ts: add gridId property gridId = "gridId2"

testX.component.html:修改html绑定< app-home [gridId] ="gridId"></app-home>

testX.component.html: adapt html bindings <app-home [gridId]="gridId"></app-home>

我将更改上传到 git repo

这篇关于在Angular 7中的页面路由后未加载angular slickgrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！