1

Tengo el siguiente código de ejemplo para explicar mi duda.

Tengo una etiqueta "a" con un href="#menu" para direccionar a otra parte de la misma pagina(al nav que tiene el id="menu"). Con HTML puro no tengo ningún problema, de hecho la url que visualiza es la correcta (con el sufijo #menu), pero cuando quiero pasar esto a mi proyecto Angular no funciona.

Por lo que veo me redirecciona a la pagina 404 que configure para las rutas que no uso y asumo que se trata por ese sufijo que se agrega a la URL.

La duda es sobre como puedo llevar este comportamiento al proyecto Angular en el que quiero aplicar?

Mi código:

<div class=" logo jumbotron  card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient1.jpg); height:42rem; margin: 2rem 2rem 2rem 2rem ;  display:flex; justify-content:center; align-items:center;">
					<div class="text-white text-center py-5 px-4">
						<div>
						
						
						<a href="#menu" style="border-radius:50%; padding-top:1.4rem; padding-left:1.9rem; padding-right:1.9rem; "  class="btn btn-outline-white btn-md"> <h1> boton </h1></a>
						</div>
					</div>
				</div>


<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

				<!--Navbar-->
				<nav class="menu navbar navbar-expand-lg navbar-dark primary-color" id="menu">

					<!-- Navbar brand -->
					<a class="navbar-brand" href="#">naveacion</a>
				
        </nav>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Muchisimas gracias de antemano...

5
  • 1
    La pregunta es... ¿Que es exactamente lo que deseas que pase o lo que no esta funcionando correctamente?, es decir, si angular no te esta encontrando la pagina es porque NO estas direccionando a la misma pagina, estas direccionando a una pagina con el directorio # y #menu, cosa que si no existen especificamente en el router de angular no te va a funcionar (angular las detecta como paginas diferentes), en html funciona es porque lo detecta como la misma pagina.
    – Layer
    Commented el 7 sept. 2019 a las 0:15
  • Mi problema no es encontrar la pagina, sino que me lleve a la seccion de la misma pagina haciendo click en la etiqueta <a>.... por eso puse el ejemplo que tiene ese comportamiento que al parecer en angular no funciona del mismo modo que con html puro Commented el 7 sept. 2019 a las 0:19
  • Ahhhh ya entiendo!
    – Layer
    Commented el 7 sept. 2019 a las 11:52
  • Puedes intenrat con routerLink <a [routerLink]="['/pagina',i]" Commented el 7 sept. 2019 a las 12:40
  • A que hace referencia la "i" ?? Commented el 7 sept. 2019 a las 20:35

2 respuestas 2

3

Des de la versión 6.1, Angular ha incorporado la función Anchor Scrolling para tal efecto. Su implementación es algo mas compleja que el tradicional método de HTML puesto que requiere del RouterModule y sus ExtraOptions. El código seria así:

En el modulo principal app.module.ts:

import { RouterModule, Routes, ExtraOptions } from '@angular/router';
...
const routerOptions: ExtraOptions = {
    anchorScrolling: "enabled",
    scrollPositionRestoration: 'enabled'
}
...
@NgModule({
...
imports: [ BrowserModule, RouterModule.forRoot(routes, routerOptions) ],
...
})
export class AppModule { }

En la lógica de tu componente app.component.ts (define un array con las secciones de la vista. Esto es opcional, puedes aplicar los nombres directamente en la vista)

public secciones: Array<string> = ['primera', 'segunda', 'tercera', 'cuarta', 'quinta'];

En la vista de tu componente app.component.html

<!-- Links de las secciones -->
<a *ngFor="let seccion of secciones" 
  [routerLink] [fragment]="seccion" 
  [routerLinkActive]="'active'"
  [routerLinkActiveOptions]="{exact: true}">
  {{seccion}}
</a>
<!-- Secciones -->
<section [id]="secciones[0]">
  <strong>{{secciones[0]}}</strong>
</section>
<section [id]="secciones[1]">
  <strong>{{secciones[1]}}</strong>
</section>
<section [id]="secciones[2]">
  <strong>{{secciones[2]}}</strong>
</section>
<section [id]="secciones[3]">
  <strong>{{secciones[3]}}</strong>
</section>
<section [id]="'quinta'">
  <strong>{{secciones[4]}}</strong>
</section>

Espero que te sirva, saludos.

0

No estoy seguro si esta es una directiva propia de angular, pero en ionic funciona correctamente (Ionic es practicamente angular), por lo que intenta lo siguiente, en vez de poner un href, coloca en tu HTML, algo como:

<a [routerDirection] = "'root'" [routerLink] = "'/menu'"></a>

Esto sirve para lazy loading si no estoy mal, checa este link:

https://medium.com/@HenryGBC/c%C3%B3mo-implementar-lazy-loading-en-angular-74b6e85d021f

Esa directiva de angular es aplicable a cualquier objeto clickable.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.