Primero agradecer a Sr. Mika Berglund haber escrito el blog original, el cual he traducido en estas líneas con su autorización, y voy a agregar mi toque personal como de costumbre.
El otro día, estaba trabajando en el componente Encabezado y quería hacer posible convertir cada Encabezado en un enlace ancla. Esto le permitiría vincular fácilmente directamente a cada título de la página. Aquí hay una explicación bastante descriptiva de lo que es un enlace ancla.
Un enlace de anclaje es un enlace web que permite a los usuarios saltar a un punto específico en una página del sitio web. Les ahorra la necesidad de desplazarse y leer rápidamente, y facilita la navegación.No suena demasiado difícil, ¿verdad? Simplemente agregue un elemento al encabezado y especifique una ID única como href, como se muestra a continuación.
< h2 id="the-heading">< a href="#the-heading">The Heading< /a>< /h2>
Entonces resulta que desafortunadamente no es tan fácil. Para que sea más fácil de seguir, creé un repositorio en GitHub con la solución a los problemas que se describen a continuación. La aplicación de muestra en el repositorio también se publica en las páginas de GitHub en https://mikaberglund.github.io/anchor-link-in-blazor-application/
El problema
El problema con los enlaces ancla es que cuando haces clic en ellos, la página no se desplaza al elemento que has especificado en el enlace. Los enlaces de anclaje siempre lo llevarán a la parte superior de la página principal de su aplicación. Esto tiene que ver con cómo se maneja el enrutamiento en Blazor y también en la mayoría de las otras aplicaciones SPA. Definitivamente no es solo un problema con Blazor.
Afortunadamente, hay una solución bastante simple. Solo necesita crear su propio componente AnchorLink (o nombrarlo como desee) y usar un poco de magia de interoperabilidad de JavaScript.
El componente AnchorLink
El componente AnchorLink está compuesto por los archivos AnchorLink.razor y AnchorLink.js. La principal responsabilidad del componente Razor es examinar el valor del atributo href y determinar si se trata de un vínculo de anclaje. Los enlaces de anclaje comienzan con un hash (#). Si se trata de un vínculo ancla, se evita la acción de clic predeterminada y se llama a la función de JavaScript scrollIntoView cuando se hace clic en el ancla mediante el tiempo de ejecución de interoperabilidad de JavaScript inyectado.
La función de JavaScript scrollIntoView es compatible con el componente Razor al desplazar el elemento dado a la vista cuando se llama a la función.
Uso del componente AnchorLink
Cuando haya completado el componente AnchorLink, puede usarlo en su aplicación como reemplazo del elemento predeterminado . Recuerde también agregar una referencia al archivo anclaLink.js a la plantilla index.html, para que el navegador también cargue ese archivo.
Puede usar cualquier atributo estándar en el componente AnchorLink como lo haría en un elemento . A continuación se muestran algunas muestras.
< p>
The Table of Contents below demonstrate how
you can use the < code>AnchorLink< /code> component.
You can also use it as a < AnchorLink href="...">normal link< /AnchorLink>
to point to any URI.
< /p>
< ul>
< li>Chapter 1< /li>
< li>Chapter 2< /li>
< li>Chapter 3< /li>
< /ul>
< h2 id="chapter1">Chapter #1< /h2>
< p>
This is chapter #1.
< /p>
< h2 id="chapter2">Chapter #2< /h2>
< p>
This is chapter #2.
< /p>
< h2 id="chapter3">Chapter #3< /h2>
< p>
This is chapter #3. The source code to the < code>AnchorLink< /code>
component is available on < AnchorLink href="https://github.com/MikaBerglund/anchor-link-in-blazor-application" target="_blank">GitHub< /AnchorLink>.
< /p>
Conclusión (de Mike Berglund)
Si desea obtener más información sobre la creación de componentes para sus aplicaciones Blazor, le sugiero que eche un vistazo al artículo Crear y usar componentes ASP.NET Core Razor. Eso le dará una muy buena visión general de lo que es posible.
Y gracias a Chris Sainty, quien señaló algunos errores en este artículo, que ahora he corregido.
Mi toque personal
Cuando yo me enfrenté con este problema, y como estaba utilizando ya Blazor con la versión de NET 6.0, además de que no me gusta tener que estar insertando los Javascript en el archivo HTML, cree esta versión actualizada que puedes encontrar en este Github.
Básicamente en esta nueva versión he modificado el Javascript para que pueda ser importado directamente desde C#, y se carga en el momento de ser utilizado.