nessa aula vamos falar sobre parâmetros de rotas então para demonstrar os parâmetros de rotas eu vou transformar essa página em uma lista de botões então ao invés de listar diretamente os nomes eu vou listar os botões com o nome de cada um aqui dos usuários então eu vou acessar aqui a minha página users bom então aqui no user no HTML ao invés de passar o item diretamente aqui para exibir na li eu vou criar um botão aqui dentro vou aplicar aqui a classe do Bootstrap um btn primary eu vou passar o nome do usuário no
nome aqui do botão que vai ficar aparecendo no botão no texto para facilitar o entendimento eu vou trocar esse item por user para ficar mais fácil então ficou dessa maneira aqui eu só vou remover esses pontos aqui para ficar somente exibindo os botões para isso eu criei uma classe chamada list Bottom tá aqui né que eu já apliquei não mostrei para vocês escrevendo list Bottom mas é só criar essa classe list botton aqui no Então você vai criar vai vir aqui no CSS P list Bottom aqui eu vou colocar um list Style Type eu vou
deixar fazendo isso ele não deixa aparecer os pontos da lista então o que que eu vou fazer quando eu clicar em um desses botões por exemplo eu vou clicar aqui no Julho cliquei aqui no Julho ele vai me redirecionar pra página do Julho então ele vai ter uma página com o nome dele escrito essa página é do Julho então para isso eu vou criar um novo componente que vai representar essa página Então vou entrar aqui no CD component components ngc esse daqui vai ser a página de usuário Então vou chamar de user diferente da página
de users onde eu estou listando skip testes daqu eu deixei o nome no singular beleza criou aqui a página user Vamos acessar então na página user eu vou exibir aqui um H2 só paraa demonstração essa página é do á né Vou colocar aqui um a também e aqui eu passo o nome do usuário vou deixar aqui de username por enquanto eu não tenho essa variável vou criar lá no meu typescript então vou acessar aqui o typescript de user vou criar variável username do tipo string e o valor inicial vai ser uma string vazia quando eu
carregar esse componente quando eu abrir esse componente eu tenho que carregar o nome do meu usuário Então eu tenho que utilizar o ng1 init para eu recuperar assim que o meu componente inicializar Então tem que fazer isso dentro da função NG init que nós já aprendemos Então vou implementar aqui o on init percebe que ele já inclui aqui automaticamente no ângulo Core e aqui eu chamo a função NG on init Então vou recuperar o nome do usuário aqui dentro do NG on init mas por onde que eu vou passar esse valor do do nome do
usuário eu posso passar esse nome através das minhas rotas então para isso eu vou acessar o meu arquivo de rotas e aqui eu vou criar uma nova rota para minha nova página então eu vou criar essa rota paraa minha página user component e aqui que eu vou passar o meu valor para passar o valor na rota você coloca dois pontos e uma palavra-chave que no meu caso aqui eu vou colocar username você pode colocar qualquer outro nome aqui eu coloquei aqui username igual aqui da minha variável mas não Obrigatoriamente você precisa colocar igual sua variável
não tem nada a ver uma coisa com a outra aqui você decide palavra que você quiser vou deixar aqui username mesmo então por exemplo se eu passar aqui users barra Vinícius aqui na minha página eu tenho que exibir esta página é do Vinícius e como que eu capturo o valor passado aqui pro meu parâmetro eu posso fazer isso no NG on init vou fazer isso aqui agora para recuperar o nome eu tenho que fazer uma injeção de dependência do activated H então ten para fazer injeção de dependência tenho que usar o Construtor e aqui nos
parâmetros do meu Construtor eu chamo meu activated H vou chamar aqui de ele vai ser do tipo activated H agora eu vou usar minha o meu h eu fiz a injeção de dependência aqui no meu NG onou init então this H PP map subscribe e aqui eu vou passar uma função dentro do meu subscribe para capturar o meu parâmetro esse meu parâmetro eu vou chamar aqui de PMs coloquei no plural porque ele pode capturar mais de um parâmetro se eu quiser no meu caso só vou ter um mesmo e aqui no meu username this username
dentro do meu subscribe né na função que eu passei aqui pro subscribe eu vou atribuir ao username params pget e aqui eu passo o valor que eu defini aqui nas minhas rotas username fazendo isso ele vai capturar o valor que o usuário passar aqui na minha rota Então vamos testar bom aqui ele reclamou de um erro que a o tipo string ou nulo não é do tipo string para resolver isso é muito simples eu posso definir o meu username que tem a possibilidade de ser nulo também isso porque o meu par pget username ele pode
ser nulo se não existir username meu username vai receber o valor nul então agora ele aceita esse valor então aqui na minha rota eu vou passar barra users barra Vinícius e olha só minha página carrega essa página é do Vinícius ele passou o valor aqui no HTML tô interrompendo a sua aula rapidamente para dar um recado Se você quer ter acesso a conteúdo exclusivo desse curso como por exemplo projeto prático empréstimo de livros onde eu disponibilizo uma API para você desenvolver o frontend em angula publicação do projeto prático usando o serviço da aws E além
disso acesso antecipada a todos os vídeos que eu vou publicar aqui no canal então aqui você já tem todos os vídeos disponíveis para você assistir e eu vou entrar aqui no projeto prático só para vocês verem como que é eu tenho aqui mais de 60 aulas para você colocar em prática esse projeto prático de empréstimo de livros vou deixar o link aqui na descrição então dá uma olhada se você quer ter acesso ao conteúdo exclusivo e também não quer ficar aguardando novos vídeos sobre angular aqui do canal e já quer ter acesso a tudo de
uma vez link aqui na descrição Então o que aconteceu foi bem simples eu capturo o username lá da minha rota assim que o componente inicializa porque eu tô passando aqui dentro do NG init e o angular ele já automaticamente detecta né que o valor foi alterado e aqui no HTML ele já coloca o username essa página é do e o valor do username só que agora eu quero clicar em um desses botões e redirecionado para aquela página passando o nome que eu cliquei aqui no meu parâmetro para fazer isso vamos utilizar o router link vou
aqui no HTML do user aqui em Bottom eu vou utilizar o router link router link que é barra users barra o nome do usuário certo eu posso fazer dessa forma passando aqui user que vai dar certo ou um jeito ainda mais prático é você utilizar o hter link só que entre só que entre colchetes quando você utiliza um parâmetro de uma tag aqui do ângulo entre colchetes ele vai aceitar diretamente as variáveis então aqui por exemplo vou passar uma string eu tenho que passar com aspas simples barra users barra vou concatenar com o user perceba
que eu não preciso utilizar as chaves eu passo direta a minha variável feito isso vamos testar esse router link vou clicar aqui por exemplo na Maria eu sou redirecionado pra página da Maria vamos voltar clicar aqui em Vinícius essa página é do Vinícius então todos estão funcionando então é assim que você passa valores pro seu componente através de parâmetros de Rota
