Histórico da Página
...
- Routes:
- Na definição da rota é onde vamos colocar qual o caminho da API que vai retornar os dados o Metadados;
- HTML
- No HTML basta colocarmos o componente, pois o metadados irá retornar o que precisamos para renderizar o componente;
- TypeScript
- No typescript do componente vamos basicamente informar qual será a API que retornará os dados de acordo com metadado;
Routes:
Abaixo segue os exemplos de como ficam estes códigos citados acima.
Routes:
exemplo de como ficará o arquivo de rotas de nossa aplicação, como podemos perceber temos a tag "data", onde vamos passar os dados da API de Metadados.
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { IdiomaDynamicComponent } from './idioma/idioma-dynamic.component'; const routes: Routes = [ { path: 'idioma', component: IdiomaDynamicComponent, data: { serviceMetadataApi: 'https://6a6a8bb8-09be-496b-aeea-faa3a7052052.mock.pstmn.io/api/trn/v1/idiomas/metadados', // endpoint dos metadados serviceLoadApi: 'https://6a6a8bb8-09be-496b-aeea-faa3a7052052.mock.pstmn.io/api/trn/v1/idiomas/metadados' // endpoint de customizações dos metadados } }, { path: '', redirectTo: '/idioma', pathMatch: 'full' }, { path: '**', component: IdiomaDynamicComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } |
HTML:
No HTML devemos inserir a tag do componente dinâmico "po-page-dynamic-detail" para renderizar os dados de acordo com o retorno do back-end.
Ponto de atenção é a tag "[p-service-api]="serviceApi" onde devemos apontar qual a váriavel do componente que indica a URL da API de Dados.
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
<div class="po-wrapper">
<po-toolbar p-title="Datasul - Dynamic - Custom"></po-toolbar>
| ||||||
Bloco de código | ||||||
| ||||||
<div class="po-wrapper"> <po-toolbar p-title="Datasul - Dynamic - Custom"></po-toolbar> <po-menu [p-menus]="menus"></po-menu> <po-page-default p-title="Idiomas"> <p> </p> <po-dynamic-view [p-fields]="fields" [p-value]="employee"> </po-dynamic-view> <po-page-dynamic-detail p-auto-router p-title="DetailIdiomas" [p-actions]="actions" [p-breadcrumb]="breadcrumb" [p-fields]="fields" [p-service-api]="serviceApi"> </po-page-dynamic-detail> </po-page-default> </div>div> |
TypeScript:
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
import { Component } from '@angular/core'; import { PoMenuItem } from '@po-ui/ng-components'; import { PoDynamicViewField } from '@po-ui/ng-components'; import { PoBreadcrumb } from '@po-ui/ng-components'; import { PoPageDynamicDetailActions, PoPageDynamicDetailField } from '@po-ui/ng-templates'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { readonly menus: Array<PoMenuItem> = [ { label: 'Home', action: this.onClick.bind(this) } ]; private onClick() { alert('Clicked in menu item') } public readonly serviceApi = 'https://po-sample-api.herokuapp.com/v1/people'; public readonly serviceMetadataApi: 'http://localhost:3000/v1/metadata'; // endpoint dos metadados //public readonly serviceLoadApi: 'http://localhost:3000/load-metadata' // endpoint de customizações dos metadados public readonly actions: PoPageDynamicDetailActions = { back: '/documentation/po-page-dynamic-table' }; public readonly breadcrumb: PoBreadcrumb = { items: [ { label: 'Home', link: '/' }, { label: 'People', link: '/documentation/po-page-dynamic-table' }, { label: 'Detail' } ] }; public readonly fields: Array<PoPageDynamicDetailField> = [ { "visible": true, "property": "codIdioma", "label": "Idioma", "type": "string" }, { "visible": true, "property": "desIdioma", "label": "Descrição", "type": "string" }, { "visible": true, "property": "codIdiomPadr", "label": "Idioma Padrão", "type": "string" }, { "visible": true, "property": "codUsuarUltAtualiz", "label": "Usuário Ult Atualiz", "type": "string" }, { "visible": true, "property": "datUltAtualiz", "label": "Última Atualização", "type": "string" }, { "visible": true, "property": "hraUltAtualiz", "label": "Hora Última Atualiz", "type": "string" }, { "visible": true, "property": "codUsuario", "label": "Usuário", "type": "string" }, { "visible": true, "property": "nomUsuario", "label": "Nome", "type": "string" }, { "visible": true, "property": "codDialet", "label": "Dialeto", "type": "string" } ]; employee = { codIdioma: "EN", desIdioma: "Inglês", codDialet: "Pt", codUsuario: "super", nomUsuario: "Super" }; } |
...
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas