One place for hosting & domains

      Consulta

      Cómo usar los parámetros de consulta en Angular


      Introducción

      Los parámetros de consulta en Angular permiten pasar los parámetros opcionales a través de cualquier ruta en la aplicación. Los parámetros de consulta son diferentes a los parámetros de ruta regulares, que solo están disponibles en una ruta y no son opcionales (por ejemplo, /product/:id).

      En este artículo, nos referiremos a un ejemplo de una aplicación que muestra una lista de productos. Proporcionaremos valores de order opcional y price-range en los que el componente receptor puede leer y actuar. Los valores proporcionados afectarán el orden y filtrado de la lista de productos.

      Uso de parámetros de consulta con Router.navigate

      Si navega a la ruta de forma imperativa usando Router.navigate, pasará los parámetros de consulta con queryParams.

      En nuestro ejemplo, si queremos enrutar visitantes a los productos con la lista ordenada por popularidad, se verá así:

      goProducts() {
        this.router.navigate(["https://www.digitalocean.com/products"], { queryParams: { order: 'popular' } });
      }
      

      Esto dará como resultado una URL con el siguiente aspecto:

      http://localhost:4200/products?order=popular
      

      También puede proporcionar múltiples parámetros de consulta. En nuestro ejemplo, si queremos enrutar visitantes a los productos con la lista ordenada por popularidad y filtrada con un alto rango de precios, se verá así:

      goProducts() {
        this.router.navigate(["https://www.digitalocean.com/products"], { queryParams: { order: 'popular', 'price-range': 'not-cheap' } });
      }
      

      Esto dará como resultado una URL con el siguiente aspecto:

      http://localhost:4200/products?order=popular&price-range=not-cheap
      

      Ahora ya sabe cómo puede usar queryParams para configurar los parámetros de consulta.

      Conservar o combinar parámetros de consulta con queryParamsHandling

      De forma predeterminada, los parámetros de consulta se pierden en cualquier acción de navegación posterior. Para evitar esto, puede configurar queryParamsHandling, ya sea para 'preserve' o 'merge'.

      En nuestro ejemplo, si queremos enrutar visitantes desde una página con el parámetro de consulta { order: 'popular' } a la página /users, manteniendo los parámetros de consulta, usaremos 'preserve':

      goUsers() {
        this.router.navigate(['/users'], { queryParamsHandling: 'preserve' });
      }
      

      Esto dará como resultado una URL con el siguiente aspecto:

      http://localhost:4200/users?order=popular
      

      En nuestro ejemplo, si queremos enrutar visitantes desde una página con el parámetro de consulta { order: 'popular' } a la página /users, pasando el parámetro de consulta { filter: 'new' }, usaremos 'merge':

      goUsers() {
        this.router.navigate(['/users'], { queryParams: { filter: 'new' }, queryParamsHandling: 'merge' });
      }
      

      Esto dará como resultado una URL con el siguiente aspecto:

      http://localhost:4200/users?order=popular&filter=new
      

      Nota: Conservar los parámetros de consulta utilizados para hacerse con preserveQueryParams configurado en true, pero esto ahora es obsoleto en Angular 4+ a favor de queryParamsHandling.

      Ahora ya sabe cómo puede usar queryParamsHandling para conservar y combinar los parámetros de consulta.

      En nuestro ejemplo, si en vez de eso está usando la directiva RouterLink para navegar a la ruta, tendría que usar queryParams de esta forma:

      <a [routerLink]="["https://www.digitalocean.com/products"]" [queryParams]="{ order: 'popular'}">
        Products
      </a>
      

      Y en nuestro ejemplo, si desea 'preserve' o 'merge' parámetros de consulta en la posterior navegación, tendría que usar queryParamsHandling de esta forma:

      <a [routerLink]="['/users']"
         [queryParams]="{ filter: 'new' }"
         queryParamsHandling="merge">
        Users
      </a>
      

      Ahora ya sabe cómo puede usar queryParams y queryParamsHandling con RouterLink.

      Acceso a los valores del parámetro de consulta

      Ahora que sabemos pasar los parámetros de consulta opcionales a una ruta, veamos cómo acceder a estos valores en las rutas resultantes. La clase ActivatedRoute tiene una propiedad queryParams que devuelve un observable de los parámetros de consulta que están disponibles en la URL actual.

      Dada la siguiente ruta URL:

      http://localhost:4200/products?order=popular
      

      Podemos acceder al parámetro de consulta order de esta forma:

      // ...
      import { ActivatedRoute } from '@angular/router';
      import 'rxjs/add/operator/filter';
      
      @Component({ ... })
      export class ProductComponent implements OnInit {
        order: string;
        constructor(private route: ActivatedRoute) { }
      
        ngOnInit() {
          this.route.queryParams
            .filter(params => params.order)
            .subscribe(params => {
              console.log(params); // { order: "popular" }
      
              this.order = params.order;
              console.log(this.order); // popular
            }
          );
        }
      }
      

      En el registro de la consola, veremos el objeto params:

      Output

      { order: "popular" }

      Y el valor params.order

      Output

      popular

      También existe queryParamMap, que devuelve un observable con un objeto paramMap

      Dada la siguiente ruta URL:

      http://localhost:4200/products?order=popular&filter=new
      

      Podemos acceder al parámetro de consulta order de esta forma:

      this.route.queryParamMap
        .subscribe((params) => {
          this.orderObj = { ...params.keys, ...params };
        }
      );
      

      Aquí hemos utilizado el operador de propagación del objeto y así es como se verán los datos en orderObj:

      {
        "0": "order",
        "1": "filter",
        "params": {
          "order": "popular",
          "filter": "new"
        }
      }
      

      Ahora ya sabe cómo puede usar queryParams y queryParamMap para acceder a los valores en las rutas resultantes.

      Conclusión

      En este artículo, utilizamos diferentes ejemplos para configurar y obtener parámetros de consulta en Angular. Presentamos queryParams y queryParamsHandling con Router.navigate y RouterLink. También presentamos queryParams y queryParamMap con ActivatedRoute.

      Si desea obtener más información sobre Angular, consulte nuestra página sobre el tema Angular para ver ejercicios y proyectos de programación.



      Source link

      Como usar parâmetros de consulta em Angular


      Introdução

      Parâmetros de consulta em Angular permitem passar parâmetros opcionais em qualquer rota na aplicação. Parâmetros de consulta são diferentes dos parâmetros regulares de rota, que só estão disponíveis em uma rota e não são opcionais (por exemplo, /product/:id).

      Neste artigo, vamos fazer referência a um exemplo de uma aplicação que exibe uma lista de produtos. Vamos fornecer valores opcionais de order e price-range sobre o qual o componente que recebe pode ler e atuar. Os valores fornecidos afetarão a ordenação e a filtragem da lista de produtos.

      Se você estiver navegando até a rota usando imperativamente Router.navigate, você irá passar parâmetros de consulta com queryParams.

      Em nosso exemplo, se quisermos encaminhar os visitantes para os produtos com a lista ordenada por popularidade, isto seria algo assim:

      goProducts() {
        this.router.navigate(["https://www.digitalocean.com/products"], { queryParams: { order: 'popular' } });
      }
      

      Isso resultará em uma URL como esta:

      http://localhost:4200/products?order=popular
      

      Também é possível fornecer vários parâmetros de consulta. Em nosso exemplo, se quisermos encaminhar os visitantes para os produtos com a lista ordenada por popularidade e filtrada com uma faixa de preços cara, isso seria assim:

      goProducts() {
        this.router.navigate(["https://www.digitalocean.com/products"], { queryParams: { order: 'popular', 'price-range': 'not-cheap' } });
      }
      

      Isso resultará em uma URL como esta:

      http://localhost:4200/products?order=popular&price-range=not-cheap
      

      Agora, você tem uma compreensão de como queryParams pode ser usado para definir parâmetros de consulta.

      Por padrão, os parâmetros de consulta são perdidos em qualquer ação de navegação subsequente. Para evitar isso, é possível definir queryParamsHandling como 'preserve' ou 'merge'.

      Em nosso exemplo, se quisermos encaminhar os visitantes de uma página com o parâmetro de consulta { order: 'popular' } para a página /users mantendo os parâmetros de consulta, usaríamos 'preserve':

      goUsers() {
        this.router.navigate(['/users'], { queryParamsHandling: 'preserve' });
      }
      

      Isso resultará em uma URL como esta:

      http://localhost:4200/users?order=popular
      

      Em nosso exemplo, se quisermos encaminhar os visitantes de uma página com o parâmetro de consulta { order: 'popular' } para a página /users enquanto passamos os parâmetros de consulta { filter: 'new' }, usaríamos 'merge':

      goUsers() {
        this.router.navigate(['/users'], { queryParams: { filter: 'new' }, queryParamsHandling: 'merge' });
      }
      

      Isso resultará em uma URL como esta:

      http://localhost:4200/users?order=popular&filter=new
      

      Nota: a preservação dos parâmetros de consulta costumava ser feita com preserveQueryParams definido como true, mas isso agora está obsoleto em Angular 4+ em favor de queryParamsHandling.

      Agora, você tem uma compreensão de como queryParamsHandling pode ser usado para preservar e mesclar parâmetros de consulta.

      Em nosso exemplo, se em vez disso você estiver usando a diretiva RouterLink para navegar até a rota, você usaria queryParams dessa forma:

      <a [routerLink]="["https://www.digitalocean.com/products"]" [queryParams]="{ order: 'popular'}">
        Products
      </a>
      

      E, em nosso exemplo, se você quiser 'preservar' ou 'mesclar' parâmetros de consulta na navegação subsequente, você usaria queryParamsHandling desta forma:

      <a [routerLink]="['/users']"
         [queryParams]="{ filter: 'new' }"
         queryParamsHandling="merge">
        Users
      </a>
      

      Agora, você entende como queryParams e queryParamsHandling podem ser usados com RouterLink.

      Acessando valores de parâmetros de consulta

      Agora que sabemos como passar parâmetros de consulta opcionais para uma rota, vamos ver como acessar esses valores nas rotas resultantes. A classe ActivatedRoute possui uma propriedade queryParams que retorna um observável dos parâmetros de consulta disponíveis na URL atual.

      Dada a seguinte URL de rota:

      http://localhost:4200/products?order=popular
      

      Podemos acessar o parâmetro de consulta order desta forma:

      // ...
      import { ActivatedRoute } from '@angular/router';
      import 'rxjs/add/operator/filter';
      
      @Component({ ... })
      export class ProductComponent implements OnInit {
        order: string;
        constructor(private route: ActivatedRoute) { }
      
        ngOnInit() {
          this.route.queryParams
            .filter(params => params.order)
            .subscribe(params => {
              console.log(params); // { order: "popular" }
      
              this.order = params.order;
              console.log(this.order); // popular
            }
          );
        }
      }
      

      No log de console veríamos o objeto params:

      Output

      { order: "popular" }

      E o valor params.order:

      Output

      popular

      Também há queryParamMap, que retorna um observável com um objeto paramMap.

      Dada a seguinte URL de rota:

      http://localhost:4200/products?order=popular&filter=new
      

      Podemos acessar os parâmetros de consulta desta forma:

      this.route.queryParamMap
        .subscribe((params) => {
          this.orderObj = { ...params.keys, ...params };
        }
      );
      

      Utilizamos o operador de propagação de objetos aqui e essa é a forma resultante dos dados em orderObj:

      {
        "0": "order",
        "1": "filter",
        "params": {
          "order": "popular",
          "filter": "new"
        }
      }
      

      Agora, você tem uma compreensão de como queryParams e queryParamMap podem ser usados para acessar valores nas rotas resultantes.

      Conclusão

      Neste artigo, você usou diferentes exemplos para definir e obter parâmetros de consulta em Angular. Apresentamos queryParams e queryParamsHandling com Router.navigate e RouterLink. Também apresentamos queryParams e queryParamMap com ActivatedRoute.

      Se você gostaria de aprender mais sobre o Angular, confira nossa página de tópico sobre Angular para exercícios e projetos de programação.



      Source link

      Como Usar o Git: Um Guia de Consulta Rápida


      Introdução

      Equipes de desenvolvedores e mantenedores de software open-source geralmente gerenciam seus projetos através do Git, um sistema distribuído de controle de versão que suporta colaboração.

      Este artigo no estilo de Guia de Consulta Rápida fornece uma referência de comandos que são úteis para o trabalho e colaboração em um repositório Git. Para instalar e configurar o Git, certifique-se de ler “How To Contribute to Open Source: Getting Started with Git.”

      Como utilizar esse guia:

      • Este guia está no formato de Guia de Consulta Rápida com fragmentos de linha de comando autocontidos.

      • Pule para qualquer seção que seja relevante para a tarefa que você está tentando completar.

      • Quando você vir texto destacado nos comandos deste guia, tenha em mente que este texto deve se referir aos commits e arquivos em seu próprio repositório.

      Configuração e Inicialização

      Verifique a versão do Git com o seguinte comando, que irá também confirmar que o git está instalado.

      Você pode inicializar seu diretório de trabalho atual como um repositório Git com o init.

      Para copiar um repositório Git existente hospedado remotamente, você irá utilizar git clone com a URL do repositório ou a localização do servidor (no último caso você irá usar ssh).

      • git clone https://www.github.com/username/nome-do-repositório

      Mostrar o repositório remoto do seu diretório Git atual.

      Para uma saída mais detalhada, use a flag -v.

      Adicionar o Git upstream, que pode ser uma URL ou pode estar hospedado em um servidor (no último caso, conecte com ssh).

      • git remote add upstream https://www.github.com/username/nome-do-repositório

      Staging

      Quando você modificou um arquivo e o marcou para ir no próximo commit, ele é considerado um arquivo preparado ou staged.

      Verifique o status do seu repositório Git, incluindo arquivos adicionados que não estão como staged, e arquivos que estão como staged.

      Para colocar como staged os arquivos modificados, utilize o comando add, que você pode executar diversas vezes antes de fazer um commit. Se você fizer alterações subsequentes que queira ver incluídas no próximo commit, você deve exwcutar add novamente.

      Você pode especificar o arquivo exato com o add.

      Com o . você pode adicionar todos os arquivos no diretório atual incluindo arquivos que começam com um ..

      Você pode remover um arquivo da área de staging enquanto mantém as alterações no seu diretório de trabalho com reset.

      Fazendo Commit

      Um vez que você tenha colocado no stage a suas atualizações, você está pronto para fazer o commit delas, que irá gravar as alterações que você fez no repositório.

      Para fazer commit dos arquivos em stage, você irá executar o comando commit com sua mensagem de confirmação significativa para que você possa rastrear os commits.

      • git commit -m "Mensagem de commit"

      Você pode condensar o staging de todos os arquivos rastreados fazendo o commit deles em uma única etapa.

      • git commit -am "Mensagem de commit"

      Se você precisar modificar a sua mensagem de commit, você pode fazer isto com a flag --amend.

      • git commit --amend -m "Nova Mensagem de commit"

      Branches ou Ramificações

      Uma branch ou ramificação é um ponteiro móvel para um dos commits no repositório. Ele lhe permite isolar o trabalho e gerenciar o desenvolvimento de recursos e integrações. Você pode aprender mais sobre branches através da leitura da documentação do Git.

      Listar todas as branches atuais com o comando branch. Um aterisco (*) irá aparecer próximo à sua branch ativa atualmente.

      Criar uma nova branch. Você permanecerá na sua branch ativa até mudar para a nova.

      Alternar para qualquer branch existente e fazer checkout em seu diretório de trabalho atual.

      • git checkout outra-branch

      Você pode consolidar a criação e o checkout de uma nova branch utilizando a flag -b.

      • git checkout -b nova-branch

      Renomear a sua branch.

      • git branch -m nome-da-branch-atual novo-nome-da-branch

      Mesclar o histórico da branch especificada àquela em que você está trabalhando atualmente.

      Abortar a mesclagem, no caso de existirem conflitos.

      Você também pode selecionar um commit particular para mesclar com cherry-pick e com a string que referencia o commit específico.

      Quando você tiver mesclado uma branch e não precisar mais dela, poderá excluí-la.

      • git branch -d nome-da-branch

      Se você não tiver mesclado uma branch com o master, mas tiver certeza de que deseja excluí-la, poderá forçar a exclusão da branch.

      • git branch -D nome-da-branch

      Colaborar e Atualizar

      Para baixar alterações de outro repositório, tal como o upstream remoto, você irá usar o fetch.

      Mesclar os commits baixados.

      • git merge upstream/master

      Envie ou transmita seus commits na branch local para a branch do repositório remoto.

      Busque e mescle quaisquer commits da branch remota de rastreamento.

      Inspecionando

      Mostrar o histórico de commits para a branch ativa atualmente.

      Mostrar os commits que alteraram um arquivo particular. Isso segue o arquivo, independentemente da renomeação do mesmo.

      • git log --follow meu_script.py

      Mostrar os commits que estão em uma branch e não estão em outra. Isto irá mostrar os commits em a-branch que não estão em b-branch.

      • git log a-branch..b-branch

      Observe os logs de referência (reflog) para ver quando as dicas de branches e outras referências foram atualizadas pela última vez dentro do repositório.

      Mostrar qualquer objeto no Git através da sua string de commit ou hash em um formato mais legível.

      Mostrar Alterações

      O comando git diff mostra as alterações entre commits, branches, entre outras. Você pode ler mais detalhadamente sobre isso através da Documentação do Git.

      Comparar arquivos modificados que estão na área de staging.

      Exibe o diff do que está em a-branch mas não está em b-branch.

      • git diff a-branch..b-branch

      Mostrar o diff entre dois commits específicos.

      • git diff 61ce3e6..e221d9c

      Stashing

      Às vezes, você descobrirá que fez alterações em algum código, mas, antes de terminar, precisa começar a trabalhar em outra coisa. Você ainda não está pronto para fazer o commit das alterações que você fez até agora, mas não quer perder seu trabalho. O comando git stash lhe permitirá salvar suas modificações locais e reverter para o diretório de trabalho que está alinhado com o commit mais recente do HEAD.

      Guarde (stash) seu trabalho atual.

      Veja o que você tem guardado atualmente.

      Seus rascunhos serão nomeados stash@{0}, stash@{1}, e assim por diante.

      Mostrar informações sobre um rascunho em particular.

      Para trazer os arquivos de um rascunho atual enquanto mantém o rascunho guardado, utilize apply.

      • git stash apply stash@{0}

      Se você quer trazer os arquivos de uma rascunho e não precisa mais do rascunho, utilize pop.

      Se você não precisar mais dos arquivos salvos em um determinado rascunho ou stash, você pode descartar o rascunho com drop.

      Se você tiver muitos rascunhos salvos e não precisar mais de nenhum deles, você pode utilizar clear para removê-los.

      Ignorando Arquivos

      Se você quiser manter arquivos em seu diretório local do Git, mas não quer fazer o commit deles no projeto, você pode adicionar esses arquivos ao seu arquvo .gitignore para que não causem conflitos.

      Utilize um editor de textos como o nano para adicionar arquivos ao arquivo .gitignore.

      Para ver exemplos de arquivos .gitignore, você pode olhar o repositório de modelos .gitignore do GitHub.

      Rebasing

      Um rebase nos permite mover as branches alterando o commit no qual elas são baseadas. Como o rebasing, você pode reescrever ou reformular os commits.

      Você pode iniciar um rebase chamando o número de commits que você fez e que você quer fazer rebase (5 no caso abaixo).

      Como alternativa, você pode fazer o rebase com base em uma determinada string de commit ou hash.

      Depois de ter reescrito ou reformulado os commits, você pode concluir o rebase da sua branch em cima da versão mais recente do código upstream do projeto.

      • git rebase upstream/master

      Para aprender mais sobre rabase e atualização, você pode ler How To Rebase and Update a Pull Request, que também é aplicável a qualquer tipo de commit.

      Resetando

      Às vezes, inclusive após um rebase, você precisa redefinir sua árvore de trabalho. Você pode redefinir ou resetar para um commit específico e excluir todas as alterações com o seguinte comando.

      Para forçar a enviar seu último commit conhecido e não conflitante para o repositório de origem, você precisará usar o --force.

      Atenção: Forçar o envio ou pushing para o master não é muito aprovado a menos que haja uma razão realmente importante para fazê-lo. Use isso com moderação ao trabalhar em seus próprios repositórios e evite fazer isso quando estiver colaborando.

      • git push --force origin master

      Para remover arquivos e subdiretórios locais não rastreados do diretório Git para uma branch de trabalho limpa, você pode usar git clean.

      Se você precisar modificar seu repositório local para que ele pareça com o upstream master atual (isto é, quando há muitos conflitos), você pode executar um hard reset.

      Nota: Executar este comando fará com que seu repositório local fique exatamente igual ao upstream. Todos os commits que você fez, mas que não foram enviados para o upstream, serão destruídos.

      • git reset --hard upstream/master

      Conclusão

      Este guia aborda alguns dos comandos mais comuns do Git que você pode usar ao gerenciar repositórios e colaborar em software.

      Você pode aprender mais sobre software open-source e colaboração em nossa série de tutoriais Introduction to Open Source:

      Existem muitos outros comandos e variações que você pode achar úteis como parte do seu trabalho com o Git. Para saber mais sobre todas as opções disponíveis, você pode executar o comando abaixo receber informações úteis:

      Você também pode ler mais sobre o Git e ver a documentação dele no website oficial do Git.

      Por Lisa Tagliaferri



      Source link