Creación de componentes de resultados de búsqueda

Crea una página de resultados de búsqueda que muestre los resultados con una ruta de navegación y paginación. Utiliza este esquema para estandarizar la presentación de los resultados, lo que ayuda a los usuarios a navegar por ellos con facilidad y garantiza una experiencia coherente en todas las funciones.

Acerca de esta tarea

Crea un search results page componente para mostrar los resultados una vez que el usuario haya ejecutado una consulta desde el componente de la página de búsqueda.

El search-result-component esquema genera dos componentes.

• Un componente de resultados de búsqueda.
• Un componente de tabla (tipo BaseTableComponent ), cuyo selector se incluye en la plantilla del componente de resultados de búsqueda.

La siguiente captura de pantalla muestra la página de resultados de la búsqueda de envíos y destaca las funciones que contiene.

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. El esquema crea el componente y actualiza el objeto de enrutamiento de muestra para el componente del resultado de la búsqueda en el módulo de enrutamiento más cercano.

   ng g @buc/schematics:search-result-component --name <name> \
   --path <resultsPageComponentPath> \
   --table-path <tableComponentPath> \
   --json-file-path <json-file-path> \
   --translation-file-path <translation-file-path> \
   --shared-lib <shared-lib> \
   --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 « "SearchResultComponent" » para indicar que se trata de un componente de resultados de búsqueda, y la palabra « "TableComponent" » para indicar que se trata de un componente de tabla. Por ejemplo, si se especifica el nombre «my-sample», los nombres de las clases generadas serán « MySampleSearchResultComponent » y « MySampleTableComponent ».

   ruta-del-archivo-json

   (Obligatorio) La ruta de acceso a la ubicación en la que deseas actualizar o crear el archivo de configuración (buc-table-config.json).

   En el buc-table-config.json archivo, el esquema crea un nombre de objeto añadiendo «-table» al nombre. Por ejemplo, mi-tabla-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 «-table» al nombre. Por ejemplo, mi-tabla-de-ejemplo.

   biblioteca compartida

   (Obligatorio) El nombre de la carpeta de la biblioteca compartida.

   vía de acceso

   (Opcional) La ruta para crear el componente de resultados de búsqueda, 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.

   ruta de la tabla

   (Opcional) La ruta para crear el componente de tabla, 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) De forma predeterminada, el esquema se actualiza buc-table-config.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:search-result-component --name my-sample --path packages/order-search/src-custom/app/features/search --table-path packages/order-search/src-custom/app/features/search --json-file-path packages/order-shared/assets/buc-app-order --translation-file-path packages/order-shared/assets/buc-app-order/i18n --shared-lib order-shared --project order-search --skip-import