Criação de componentes de resultados de pesquisa

Crie uma página de resultados de pesquisa que exiba os resultados com trilha de navegação e paginação. Use este esquema para padronizar a forma como os resultados são exibidos, o que ajuda os usuários a navegar facilmente pelos resultados e mantém uma experiência consistente em todos os recursos.

Sobre esta tarefa

Crie um search results page componente para exibir os resultados depois que um usuário executar uma consulta a partir do componente da página de pesquisa.

O search-result-component esquema gera dois componentes.

• Um componente de resultados de pesquisa.
• Um componente de tabela (do tipo BaseTableComponent ), cujo seletor está incluído no modelo do componente de resultados da pesquisa.

A captura de tela a seguir mostra a página de resultados da pesquisa de remessas e destaca os recursos disponíveis nessa página.

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. O esquema cria o componente e atualiza o objeto de roteamento de amostra para o componente de resultado da pesquisa no módulo de roteamento mais próximo.

   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

   nome

   (Obrigatório) O nome do componente.

   O esquema gera um nome de classe de componente removendo os caracteres especiais e acrescentando a palavra “ "SearchResultComponent" ” para indicar um componente de resultados de pesquisa e a palavra “ "TableComponent" ” para indicar um componente de tabela. Por exemplo, se você especificar o nome `my-sample `, os nomes das classes geradas serão ` MySampleSearchResultComponent ` e ` MySampleTableComponent `.

   caminho-do-arquivo-json

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

   No buc-table-config.json arquivo, o esquema cria um nome de objeto acrescentando "-table" ao nome. Por exemplo, minha-tabela-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 "-table" ao nome. Por exemplo, minha-tabela-de-exemplo.

   biblioteca compartilhada

   (Obrigatório) O nome da pasta da biblioteca compartilhada.

   caminho

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

   caminho da tabela

   (Opcional) O caminho para criar o componente de tabela, 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-table-config.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: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