3.5 KiB
{@a top}
Establecer el título del documento
Tu aplicación debería poder hacer que el título de la barra del navegador diga lo que quieras que diga. Esta guía explica cómo hacerlo.
Ve el .
El problema con el <título>
La manera mas obvia es enlazar una propiedad del componente al HTML <title> como este:
Lamentablemente eso no funcionará. El componente raíz de la aplicación es un elemento contenido en la etiqueta <body>. El <title> HTML está en el <head> del documento, fuera del <body>, lo que lo hace inaccesible para el enlace de datos de Angular.
Tu podrías tomar el objeto document del navegador y establecer el título manualmente.
Eso no es ideal y socava tus posibilidades de ejecutar la aplicación fuera de un navegador algún día.
Ejecutar tu aplicación fuera de un navegador significa que puedes aprovechar las ventajas del renderizado del lado del servidor para tiempos del primer renderizado de la primera aplicación casi instantáneos y para SEO. Significa que puedes correr la aplicación dentro de un Web Worker para mejorar la capacidad de respuesta de tu aplicación mediante el uso de varios subprocesos. Y también significa que puedes ejecutar tu aplicación dentro de Electron.js o Windows Universal para enviarla al escritorio.
Utiliza el servicio Title
Afortunadamente, Angular reduce las diferencias al proporcionar un servicio Title como parte de la plataforma del navegador.
El servicio Title es una clase simple que proporciona un API
para obtener y configurar el título del documento HTML actual:
getTitle() : string—Obtiene el título del documento HTML actual.setTitle( newTitle : string )—Establece el título del documento HTML actual.
Puedes inyectar el servicio Title en la raíz de AppComponent y exponer un método setTitle enlazable que lo llame:
¡Enlaza ese método a tres etiquetas de anclaje y listo!
Aquí está la solución completa:
¿Por qué proporcionar el servicio Title en el arranque?
Por lo general, deseas proporcionar servicios para toda la aplicación en el componente de la aplicación raíz, AppComponent.
Esta guía recomienda registrar el servicio de títulos durante el arranque (boostrapping), una ubicación que se reserva para configurar el ambiente de ejecución de Angular.
Eso es exactamente lo que está haciendo.
El servicio Title es parte de la plataforma del navegador de Angular.
Si inicias tu aplicación en una plataforma diferente,
tendrás que proporcionar un servicio de Title diferente que comprenda
el concepto de un "título de documento" para esa plataforma específica.
Idealmente, la aplicación en sí no conoce ni se preocupa por el ambiente de ejecución.