Crea una página de búsqueda que muestre campos configurables y opciones de agrupación. Utiliza este esquema para crear rápidamente una interfaz de usuario de búsqueda, lo que te ayudará a definir los criterios de búsqueda con un diseño coherente y a reducir el trabajo de configuración manual.
Acerca de esta tarea
Crea un search page componente que permita a los usuarios especificar criterios de búsqueda y buscar datos.
El
search-panel esquema crea el componente de la página de búsqueda e incluye código para habilitar las siguientes funciones:
- Una ruta de navegación
- Función «Guardar búsqueda»
- Función para personalizar los criterios de búsqueda
- Buscar por categorías
La siguiente captura de pantalla muestra la página
de búsqueda de envíos y destaca las funciones que ofrece dicha página.
Procedimiento
- Ve al módulo en el que quieras añadir el componente.
Por ejemplo, devtoolkit_docker/orderhub-code/buc-app-order.
- Crea el componente ejecutando el siguiente comando.
ng g @buc/schematics:search-panel --name <name> \
--json-file-path <json-file-path> \
--translation-file-path <translation-file-path> \
--shared-lib <shared-lib> \
--path <path> \
--json-file-name <json-file-name> \
--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 « "SearchComponent" ». Por ejemplo, si se especifica el nombre «my-sample», el nombre de la clase generada será « MySampleSearchComponent ».
- 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 (search_fields.json). Por ejemplo, packages/order-shared/assets/buc-app-order.
- En el search_fields.json archivo, el esquema crea un nombre de objeto añadiendo «-search» al nombre. Por ejemplo, «mi-búsqueda-de-prueba ».
- ruta-del-archivo-de-traducción
- (Obligatorio) La ruta de acceso a la ubicación donde desea actualizar o crear los literales de traducción (en.json). Por ejemplo, packages/order-shared/assets/buc-app-order/i18n.
- En el en.json archivo, el esquema crea un nombre de objeto añadiendo «-search» al nombre. Por ejemplo, «mi-búsqueda-de-prueba ».
- biblioteca compartida
- (Obligatorio) El nombre de la carpeta de la biblioteca compartida.
- 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 search_fields.json con los datos de prueba. Si necesitas actualizar o añadir tu objeto a otro archivo, utiliza este parámetro. Si se indica 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 packages/order-search-result el proyecto, el nombre es «order-search-result».
El siguiente comando ofrece un ejemplo con parámetros.
ng g @buc/schematics:search-panel --name my-sample --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
Resultados
El esquema crea el nuevo componente y actualiza los archivos compartidos. El resultado resume los archivos que se han creado y actualizado.
Qué hacer a continuación
Puedes utilizar el componente tal cual o ampliarlo para adaptarlo a necesidades empresariales específicas.
