Criação de componentes de campo

Crie componentes de campo reutilizáveis que definam como cada campo de entrada se comporta e é exibido. Use este esquema para padronizar as definições de campos, o que ajuda a manter a consistência na validação, na exibição e na reutilização em experiências de pesquisa e formulários.

Sobre esta tarefa

Crie um Field componente para exibir os detalhes de um registro específico. Por exemplo, datas dos pedidos, linhas de pedido e informações sobre o ponto de expedição de um pedido.

O summary-component esquema permite a criação de dois tipos de componentes:

1. Field component: Para exibir atributos na área de conteúdo de uma página.
2. Summary component: Para exibir atributos no painel lateral direito de uma página de detalhes.

A captura de tela a seguir mostra a página de detalhes da remessa e destaca os diferentes componentes.

1. Vá até o módulo onde deseja adicionar o componente.
   Por exemplo, devtoolkit_docker/orderhub-code/buc-app-order.
2. Crie o componente executando o comando a seguir.

   ng g @buc/schematics:summary-component \
   --name <name> \
   --json-file-path <json-file-path> \
   --translation-file-path <translation-file-path> \
   --is-summary-panel <true|false> \
   --path <path> \
   --project <project-name> \
   --skip-import

   Parâmetros

   nome

   (Obrigatório) O nome do componente.

   O esquema gera um nome de classe de componente removendo os caracteres especiais e acrescentando a palavra “ "FieldsComponent" ”. Por exemplo, se você especificar o nome `my-sample `, o nome da classe gerada será ` MySampleFieldsComponent `.

   caminho-do-arquivo-json

   (Obrigatório) O caminho para o local onde você deseja atualizar ou criar o arquivo de configuração (buc-field-details.json).

   No buc-field-details.json arquivo, o esquema cria um nome de objeto acrescentando "-fields" ao nome. Por exemplo, meu-campo-de-exemplo.

   caminho-do-arquivo-de-tradução

   (Obrigatório) O caminho para o local onde você deseja atualizar ou criar os literais de tradução (en.json).

   No en.json arquivo, o esquema cria um nome de objeto acrescentando "-field" ao nome. Por exemplo, meu-campo-de-exemplo.

   painel-de-resumo

   (Opcional) Valor booleano para determinar o tipo de componente a ser criado. Defina como "true" para criar um componente Resumo. Especifique "false" para criar um componente Field. O valor padrão é true .

   caminho

   (Opcional) O caminho para criar o arquivo do componente, relativo ao módulo atual. Por padrão, é criada uma pasta com o mesmo nome do componente na pasta raiz do módulo.

   nome-do-arquivo-json

   (Opcional) Por padrão, o esquema é atualizado buc-field-details.json com os dados de teste. Se você precisar atualizar ou adicionar seu objeto a um arquivo diferente, use este parâmetro. Se você especificar um nome de arquivo que não exista na pasta de recursos, um novo arquivo será criado.

   projeto

   (Obrigatório) O nome da pasta do pacote na qual o esquema está sendo criado. Por exemplo, ao criar um componente de resultados de pesquisa na pasta packages/order-search-result, o nome do projeto será order-search-result.

   O comando a seguir apresenta um exemplo com parâmetros.

   ng g @buc/schematics:summary-component --name my-sample --path packages/order-search/src-custom/app/features/search --json-file-path packages/order-shared/assets/buc-app-order --is-summary-panel true --project order-search --skip-import

   O esquema cria o novo componente e atualiza os arquivos compartilhados. A saída resume os arquivos que foram criados e atualizados.
3. Se você criou um Componente de Campo, edite o arquivo HTML gerado para passar o parâmetro header e especificar um rótulo para a guia.
   Por exemplo, se você observar a captura de tela, a guia ativa tem o título "Detalhes". O rótulo "Detalhes" é definido adicionando-se um cabeçalho com o caminho para o literal de tradução no en.json arquivo.

   [header]="'SHIPMENT_DETAILS.SHIPMENT_TABS.SHIPMENT_DETAILS'"