Реализация компонента ArgusTranslateComponent
Также в компоненте ArgusBaseComponentвызывается компонент ArgusTranslateComponentпри помощи тега argus-language.
Для того что бы сделать локализацию между двумя языками были созданы два файла с расширением .json, это ru-RU.jsonи en-EN.json. Как понятно из названия, в одном файле прописываются значения на русском языке, а в другом файле на английском.
Данный компонент реализует переключение между двумя языкамивеб-приложения.
Пример кода переключения языков:
publicchangeOnRu() {
this.translate.use('ru-RU');
}
public changeOnEn() {
this.translate.use('en-EN');
}
Данные функции привязаны к кнопкам. Функция useговорит библиотеке Translateиспользовать файл с нужным названием.
Пример вызова функции в шаблоне при нажатии:
<a (click)="changeOnEn()">
{{ 'en' | translate }}
</a>
В данном коде показан вызов функции при нажатии на кнопку, а также показана строка, в которой указывается ключ и обращение к библиотеке, что бы она посмотрела значение у данного ключа и поставила найденное значение в зависимости от выбранного языка.
РеализациякомпонентовArgusStartComponentиArgusDetailComponentкак основных страниц
После добавления библиотек при помощи которых реализованосновной функционал, были созданы два компонента ArgusStartComponent – стартовую страницуи ArgusDetailComponent– страницу с дополнительной информацией об предприятии.
ПримеркодакомпонентаArgusStartComponent:
public gridConfig = <GridConfig>{
compContext: this,
isMultiSelection: true,
isColumnChooser: true,
isExport: true,
isFilterRow: true,
|
|
|
isGroupPanel: true,
contextMenu: true,
isHeaderFilter: true,
isPager: true,
isPaging: true,
};
ngOnInit() {
let self = this;
this.argusStartProvider.init();
}
goDetailPage($event: any) {
this.router.navigate(['detail', $event.data.id]);
}
Переменная gridConfigявляется объектом с опциями для компонента ArgusGridComponent. В данном объекте указывается какой функционал библиотеки будет работать.
В функции goDetailPage() идет работа с библиотекой Router. Функция библиотеки navigateпереадресовывает на страницу с детальной информацией об предприятии и передает параметр id данного предприятия.
Функция ngOnInit() запускается, как только происходит инициализация компонента. И в данной функции идет обращение к провайдеру, который обращается к сервису. Сервис делает запрос на сервер и получает данные которые передает в провайдер.
Примеркодапровайдера:
init() {
let self = this;
self.argusStartService.getViewGrid().subscribe((view) => {
let columns = self.gridProvider.viewColumnsToGridColumns(view);
self.compContext.gridConfig.columnDef = columns;
self.argusStartService.getDataGrid().subscribe((dataGrid) => {
self.compContext.gridConfig.rowData = dataGrid;
self.compContext.isLoaded = true;
self.compContext.dataLoaded.emit();
});
});
}
Примеркодасервиса:
getDataGrid(): Observable<any> {
return this.httpService.getMock('api/grid');
}
getViewGrid(): Observable<any> {
return this.httpService.getMock('api/view');
|
|
|
}
Примеркодашаблона:
<div style="height: 100%" fxLayout="column">
<div fxFlex="10" fxFlex.sm="15" fxFlex.xs="15" fxLayout="row">
<h3 style="padding-left: 10px">{{ 'start.title' | translate }}</h3>
</div>
<div fxFlex="90" fxFlex.sm="85" fxFlex.xs="85">
<argus-grid [gridConfig]="gridConfig" (rowDoubleClicked)="goDetailPage($event)"></argus-grid>
</div>
<div *ngIf="!isLoaded" class="spiner">
<mat-spinner></mat-spinner>
</div>
</div>
В коде показана работа библиотеки FlexLayout. При помощи атрибута fxFlexуказывается размер контента, если написать fxFlex.sm это означается что для экрана размера smallбудет изменен размер контента.
Тег mat-spinnerявляется компонентом библиотеки Material. В данном случае этот компонент показывается перед полной загрузкой страницы. После того как компонент прогрузился данный компонент скрывается. Это делается при помощи директивы *ngIf.
Тег argus-gridинициализирует работу компонента ArgusGridComponent. При помощи директивы[gridConfig] передается объект gridConfigиз компонента ArgusStartComponentв компонент ArgusGridComponent при помощи объявления @Input(‘gridConfig’), а данный код (rowDoubleClicked)позволяет реагировать на изменения в компоненте ArgusGridComponent, реализованного при помощи объявления @Output(‘rowDoubleClicked’). В данном случае если будет двойное нажатие на строку в таблице, то в компоненте ArgusStartComponentбудет запущена функция goDetailPage().
|
|
|
На данный момент код в компоненте ArgusDetailComponent, провайдере и сервисетакой-же, как и у компонента ArgusStartComponent, его провайдера и сервиса. За исключение того, что в компоненте ArgusDetailComponent идет вызов двух других компонентов.
Примеркодашаблона:
<argus-accordion [data]="details"></argus-accordion>
<argus-pdf [fileName]="fileName" [src]="src"></argus-pdf>
Тегargus-accordionинициализируеткомпонентArgusAccordionComponentспереданнымиемуданными.
Тег argus-pdfинициализирует компонент ArgusPdfComponentс переданными ему названием файла, и пути к нему.
Компонент ArgusGridComponentинициализируется на данной странице с таким же кодом что и на стартовой странице.
Дата добавления: 2018-08-06; просмотров: 524; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!