Изменить столбцы сетки на основе выбранной плитки

Question

Я работаю над некоторым компонентом панели мониторинга в приложении angular, я новичок в angular

На основании выбранной плитки, мою сетку нужно изменить

Мой текущий код

в Component.ts

    tileId: any = '1';
public appliedcolumns =[{
    name: 'EmployeeId',
    type: 'number',
    sortable: true,
    hidden: false,
    displayName: 'Employee Id'
  },
  {
      name: 'EmployeeName',
      type: 'string',
      sortable: true,
      hidden: false,
      displayName: 'Employee Name',
  },
  {
    name: 'AppliedDate',
    type: 'dateTime',
    sortable: true,
    hidden: false,
    displayName: 'Approved Date',
  }] 

public approvedcolumns =[{
    name: 'EmployeeId',
    type: 'number',
    sortable: true,
    hidden: false,
    displayName: 'Employee Id'
  },
  {
      name: 'EmployeeName',
      type: 'string',
      sortable: true,
      hidden: false,
      displayName: 'Employee Name',
  },
  {
    name: 'ApprovedDate',
    type: 'dateTime',
    sortable: true,
    hidden: false,
    displayName: 'Approved Date',

  }} 
ngOnInit() {
this.getDetails("1");
}

getDetails(tileid: string) {
//getting data from backend
}

//on tile click event sending the new tile id to getdata
onClickMe(tile){
this.getDetails(tileId);
}

HTML выглядит как

<div class="panel"(click)="onClickMe(tile)"></div>

<div *ngIf="tileId == 1">
        <custum-grid-view class="" [jsonObject]="jsonData" [totalNoOfRecords]="totalNoOfRecords" [gridOptions]="gridOptions" [gridActions]="actions" [staticColumns]="appliedcolumns" (actionsEvent)="actionsEvent($event)"></custum-grid-view>
      </div>
      <div *ngIf="tileId == 2">
        <custum-grid-view class="" [jsonObject]="jsonData" [totalNoOfRecords]="totalNoOfRecords" [gridOptions]="gridOptions" [gridActions]="actions" [staticColumns]="approvedcolumns" (actionsEvent)="actionsEvent($event)"></custum-grid-view>
      </div>

Весь мой код работает нормально для меня, но я не хочу, чтобы значения жесткого кода в моем коде

У меня есть 4-5 плиток на моей панели инструментов и те же 4-5 столбцовых объектов в одном и том же Component.ts, как я могу переместить их из компонента y и получить доступ с внешней стороны

Answer 1

Переместите их в Service, если нет сервера, который может предоставить вам эти данные.

Затем вы можете использовать внедрение зависимостей и получить данные вроде:

export class YourComponent {
    public appliedcolumns = [];
    public approvedcolumns = [];
    ...
    constructor(private dataService: DataService){
         this.appliedcolumns = this.dataService.getAppliedColumns();
         this.approvedcolumns = this.dataService.getApprovedColumns();
         //...etc
    }   
}

Редактировать : В сервисе вы можете иметь метод для извлечения данных на основе индекса.

// Inside DataService, for applied columns lets say
getAppliedColumnsDetailsByID(id: number){
   return this.appliedcolumns[id] ? this.appliedcolumns[id] : null;
}

Вы можете сделать то же самое для других данных или объединить их в одну функцию.