Skip to main content

Router title

  • Router title

https://miro.medium.com/v2/resize:fit:700/1*SL9x9fJEWaFjJBOxWYcapA.png

Ao criar aplicativos Angular, é uma boa prática atualizar o título da guia em cada navegação bem-sucedida.

Adicionar um título de página melhora a acessibilidade e a experiência do usuário. Até agora, você mesmo teve que construir esse recurso, porém, no Angular 14, esse recurso é fornecido pelo framework. Vamos dar uma olhada.

O que tivemos que fazer até agora

Para alterar o título da página após uma navegação bem-sucedida, tivemos que fornecer o título da página como uma propriedade de dados em nossa configuração de rota.

https://miro.medium.com/v2/resize:fit:700/1*pgYuk-v-R7yr6DlRYXY4DQ.png

Forneça o título da página como dados de rota

Em seguida, tivemos que implementar manualmente alguma lógica para acessar o titleatributo fornecido e atualizar o título da guia.

https://miro.medium.com/v2/resize:fit:700/1*qzJIUItvbEteSe7U6yRUEg.png

Implementação manual para alterar o título da guia

Tivemos que ouvir todos NavigationEndos eventos e então mapear esse evento no título da aba. Finalmente usamos a titleServiceque injetamos como Titlefrom @angular/platform-browserpara definir o título.

Esta implementação ainda funciona no Angular v14, mas pode ser drasticamente simplificada.

Título do roteador integrado

No Angular v14 não precisamos mais implementar a lógica que exploramos acima. Simplesmente temos que usar a nova propriedade title nas configurações da rota.

https://miro.medium.com/v2/resize:fit:700/1*9bdlswidp6hjJ_h82QlO0A.png

Use o atributo title para fornecer novos títulos de páginas

É isso. Com este código, o título da página é atualizado a cada navegação bem-sucedida.

Uau. Isso é incrível. Mas, em nosso caso de uso, temos que prefixar cada título com o nome do aplicativo, e isso é frequentemente esquecido pelos novos desenvolvedores de nossa equipe. Bem, nesses casos podemos sobrescrever o arquivo global TitleStrategy.

Você quer levar suas habilidades em Angular, RxJS, TypeScript e JavaScript para o próximo nível? Não perca a chance de conferir meu canal no Youtube .

https://miro.medium.com/v2/resize:fit:700/0*IPAqN3xxlTDbXKq9.png

https://www.youtube.com/channel/UCFT4YVZl7AFia7rZBTEvavw

Substituindo o TitleStrategy global

Se quisermos executar alguma lógica comum para cada título, podemos sobrescrever o arquivo TitleStrategy. Vamos substituir a estratégia do título para adicionar um My App prefix —título na frente de cada rota.

https://miro.medium.com/v2/resize:fit:700/1*GBWueS2EGF4jqvUEtHi_SQ.png

Substitua o TitleStrategy integrado por nosso AppPrefixTitleStrategy personalizado

Para aplicar esta estratégia temos que sobrescrever o fornecido TitleStrategyno providersarray insider our app.module.ts.

https://miro.medium.com/v2/resize:fit:700/1*qi2eBSFOpN0Qv3HO0NjFCw.png

Substitua o TitleStrategy padrão dentro do AppRoutingModule

Ótimo. Cada título de página agora recebe o prefixo My App prefix —.

Ok, isso é legal. Mas quero executar alguma lógica personalizada para uma rota específica. Bem, não há problema. Podemos usar resolvedores.

Usando resolvedores para definir títulos de páginas

Os resolvedores são um conceito familiar ao trabalhar com o roteador Angular. Podemos usá-los para buscar dados ou executar alguma lógica antes que uma rota seja resolvida. Podemos fazer o mesmo com os títulos das páginas.

Vamos adicionar BazTitleResolverum baz-title.resolver.tsarquivo que retornará um título personalizado para a rota baz.

https://miro.medium.com/v2/resize:fit:700/1*mhM-4MjviOfJR3d5nsaxRg.png

Resolvedor de título personalizado para a rota baz

Depois de implementarmos nosso resolvedor, ainda teremos que usá-lo para nossa rota baz.

https://miro.medium.com/v2/resize:fit:700/1*onMLmdRK-cw4jbw-NdPOlg.png

Forneça o BazTitleResolver para a rota baz

É isso. Implementamos com sucesso um resolvedor de título personalizado para a rota baz.

☝️ Se fornecermos um resolvedor e um TitleStrategy personalizado, ambos serão executados. Significa que, ao rotear em nosso exemplo para a rota baz, o título seria definido como My App Prefix — Baz / from resolver.

Conclusão

O novo recurso de título do roteador é incrível. Isso simplifica drasticamente nosso código e nos poupa muita digitação. Além disso, resolver ou sobrescrever o integrado TitleStrategyoferece muita flexibilidade.

https://miro.medium.com/v2/resize:fit:700/0*9B1vPkvBxlmiYTtf.png

Bem-vindo ao mundo da excelência Angular — angularexperts.ch

Você acha as informações deste artigo úteis? — Fornecemos suporte especializado personalizado para o desenvolvimento de suas aplicações Angular. Explore nossa ampla variedade de ofertas em angularexperts.ch