Creación de componentes de campo

Crea componentes de campo reutilizables que definan cómo se comportan y se muestran los campos de entrada individuales. Utiliza este esquema para estandarizar las definiciones de los campos, lo que te ayudará a mantener la coherencia en la validación, la visualización y la reutilización en las experiencias de búsqueda y de formularios.

Acerca de esta tarea

Crea un Field componente para mostrar los detalles de un registro concreto. Por ejemplo, las fechas de los pedidos, las líneas de pedido y la información sobre los puntos de envío de un pedido.

El summary-component esquema permite crear dos tipos de componentes:

1. Field component: Para mostrar los atributos en el área de contenido de una página.
2. Summary component: Para mostrar los atributos en el panel lateral derecho de una página de detalles.

La siguiente captura de pantalla muestra la página de detalles del envío y destaca los distintos elementos.

1. Ve al módulo en el que quieras añadir el componente.
   Por ejemplo, devtoolkit_docker/orderhub-code/buc-app-order.
2. Crea el componente ejecutando el siguiente comando.

   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

   nombre

   (Obligatorio) El nombre del componente.

   El esquema genera el nombre de una clase de componente eliminando los caracteres especiales y añadiendo la palabra « "FieldsComponent" ». Por ejemplo, si se especifica el nombre «my-sample», el nombre de la clase generada será « MySampleFieldsComponent ».

   ruta-del-archivo-json

   (Obligatorio) La ruta de acceso a la ubicación donde deseas actualizar o crear el archivo de configuración (buc-field-details.json).

   En el buc-field-details.json archivo, el esquema crea un nombre de objeto añadiendo «-fields» al nombre. Por ejemplo, «mi-campo-de-ejemplo ».

   ruta-del-archivo-de-traducción

   (Obligatorio) La ruta de acceso a la ubicación en la que deseas actualizar o crear los literales de traducción (en.json).

   En el en.json archivo, el esquema crea un nombre de objeto añadiendo «-field» al nombre. Por ejemplo, «mi-campo-de-ejemplo ».

   panel-de-resumen

   (Opcional) Valor booleano para determinar el tipo de componente que se va a crear. Especifica «true» para crear un componente «Summary». Especifica «false» para crear un componente de campo. El valor predeterminado es true.

   vía de acceso

   (Opcional) La ruta para crear el archivo del componente, relativa al módulo actual. De forma predeterminada, se crea una carpeta con el mismo nombre que el componente en la carpeta raíz del módulo.

   nombre-del-archivo-json

   (Opcional) Por defecto, el esquema se actualiza buc-field-details.json con los datos de prueba. Si necesitas actualizar o añadir tu objeto a otro archivo, utiliza este parámetro. Si se especifica un nombre de archivo que no existe en la carpeta «assets», se creará un nuevo archivo.

   proyecto

   (Obligatorio) El nombre de la carpeta del paquete en la que se está creando el esquema. Por ejemplo, al crear un componente de resultados de búsqueda en la carpeta «packages/order-search-result», el nombre del proyecto será «order-search-result».

   El siguiente comando ofrece un ejemplo con 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

   El esquema crea el nuevo componente y actualiza los archivos compartidos. El resultado resume los archivos que se han creado y actualizado.
3. Si has creado un componente de campo, edita el archivo HTML generado para pasar el parámetro «header» y especificar una etiqueta para la pestaña.
   Por ejemplo, si te fijas en la captura de pantalla, la pestaña activa lleva el título «Detalles». La etiqueta «Detalles» se especifica añadiendo un encabezado con la ruta al literal de traducción en el en.json archivo.

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