Quiero un enlace de anclaje para saltar a una sección específica en la misma página usando el hashtag de identificación. aquí está mi html:
<div class="nav-container">
<ul class="nav text-center">
<li class="active">
<a href="#account-services">Services</a>
</li>
<li>
<a [routerLink]="['//account/'+account.account_id]" fragment="account-about">About</a>
</li>
<li>
<a href="#account-gallery">Gallery</a>
</li>
<li>
<a href="#account-reviews">Reviews</a>
</li>
</ul>
</div>
<div class="account-details">
<div id="account-services">
<h1>services</h1>
</div>
<div id="account-about">
<h1>About Us</h1>
</div>
<div id="account-store">
<h1>Store</h1>
</div>
<div id="account-gallery">
<h1>Gallery</h1>
</div>
<div id="account-reviews">
<h1>Reviews</h1>
</div>
</div>
Ts componente:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-account-individual',
templateUrl: './account-individual.component.html',
styleUrls: ['./account-individual.component.css']
})
export class AccountIndividualComponent implements OnInit {
private fragment: string;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.fragment.subscribe(fragment => { this.fragment = fragment; });
}
ngAfterViewInit(): void {
try {
document.querySelector('#' + this.fragment).scrollIntoView();
} catch (e) {
console.log(e);
}
}
}
1
Mohammad
16 ene. 2018 a las 12:17
3 respuestas
La mejor respuesta
Instale este paquete
ng2-page-scroll
Después de importar en tu app.module.ts
import {Ng2PageScrollModule} from 'ng2-page-scroll';
@NgModule({
imports: [
/* Other imports here */
Ng2PageScrollModule
]
})
export class AppModule {
}
Y prueba en tu componente html
<a pageScroll href="#home">Testing</a>
<div id="home">
1
Brijesh Mavani
16 ene. 2018 a las 09:51
Probar esto
this.route.fragment.subscribe(fragment => {
setTimeout(() => {
this.scrollTo(fragment);
}, 300);
});
0
Shailesh Ladumor
16 ene. 2018 a las 09:38
Use el fragmento como lo hizo y asígnelo a un evento de clic:
En tu plantilla
<a fragment="account-about" (click)="navigateToSection('account-about')>About</a>
<div id="account-about">...</div>
En su componente
public navigateToSection(section: string) {
window.location.hash = '';
window.location.hash = section;
}
2
Ali Jamal
7 may. 2020 a las 12:44
Nuevas preguntas
angular
Preguntas sobre Angular (que no debe confundirse con AngularJS), el marco web de Google. Use esta etiqueta para preguntas angulares que no son específicas de una versión individual. Para el marco web anterior de AngularJS (1.x), use la etiqueta angularjs.