Связывание для правильного вызова службы в моем приложении Angular 2

Question

В моем приложении Angular 2 у меня есть несколько различных компонентов, которые отображают данные для разных групп. Каждая из разных групп имеет другой вызов службы API. Однако, несмотря на то, что для разных наборов данных табулярный дисплей/макет сам по себе одинаковый для каждого.

В компоненте для каждой соответствующей группы я использую служебный вызов, подобный этому (этот для «group1»). Я подписываюсь на данные в моем OnInit в моем group1.component.ts:

ngOnInit() { 
    this.group1Service.getGroup() 
     .subscribe(resRecordsData => this.records = resRecordsData, 
     responseRecordsError => this.errorMsg = responseRecordsError); 
} 

Теперь, что я хотел бы сделать, это сократить дублирование (т.е. сделать его сухим эр) путем абстрагирования из табличный дисплей, поэтому я могу просто отбросить его в каждый вид компонента в виде дочернего представления. Таким образом, вид для компонента 1, например, будет выглядеть следующим образом («настольный дисплей» является часть, которая абстрагируется в коде ниже):

<div class="page-view"> 
    <div class="page-view-left"> 
     <comp1-left-panel></comp1-left-panel> 
    </div> 
    <div class="page-view-right"> 
     <div class="page-content"> 
      <table-display></table-display> 
     </div> 
    </div> 
</div> 

Мой вопрос, как я могу связать правильный вызов службы (т. е. правильный компонент) на «табличный дисплей» для каждого компонента? Могу ли я использовать @Input здесь, или, возможно, привязать квадратные скобки?

Answer 1

Да, вы должны использовать вход на компоненте таблицы отображения и заполнить его от родительского компонента:

<table-display [Data]="arrayOfData"></table-display> 

Где [Data] будет определить в табличном-дисплее, как:

@input Data: Array<any>; 

Answer 2

Вы можете передать необходимые данные, как Input, table-display.

Если все компоненты имеют один и тот же тип структуры для отображения данных в таблице. Тогда я бы рекомендовал создать отдельный класс для общих данных и передать объект этого общего класса.

Вы можете написать функцию сопоставления в каждом компоненте, которая вернет необходимые данные в table-display, иначе, если это простая структура JSON, то вы можете передать ее на лету.

например

Допустим, есть 4 атрибуты, которые необходимо показать в таблице-дисплей, Мы создаем common.ts

export class Common { 
col1: string; #whatever data structure you need 
col2: number; 
col3: number[]; 
col4: Object; 
constructure(col1: any,col2: any,col3: any,col4: any){ 
this.col1 = col1; 
//set other attributes similarly 

} 

} 

нет в component1.component.ts

import {Common} from './path_to_common.ts' 
#other imports here 
@component { 
selector: 'app-component1', 
template: "your about template" 
} 
export class Component1Component implements OnInit{ 

common: Common; #this is the common attribute you will pass to **table-display** 

constructure(component1_service: Component1Service){ 
} 

ngOnInit(){ 

#get your data from service here 
#now set **common** attribute here by settings 4 attributes we defined 
#e.g 
this.common = new Common(service_record.col1,service_record.col2....) 
} 

} 

это все теперь вы можете передать этот common атрибут в качестве входных данных:

в ваших компонентов шаблонов

<table-display [common]="common"></table-display> 

сейчас пишу TableDisplayComponent

import {Input} from '@angular/core' 
`import {Common} from './path_to_common.ts' 
#other imports here 
@component { 
selector: 'table-display' 
template: `what ever your template is to show table` 
} 

export class TableDisplayComponent{ 

@Input() common: Common; #This common will be passed as input from all of your components 
}