角度的:如何使链接跳转到同一页面中的特定部分 [英] angular: how to make link to jump for certain section in the same page
本文介绍了角度的:如何使链接跳转到同一页面中的特定部分的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使用ID主题标签跳转到锚定链接以跳至同一页面中的特定部分。这是我的html:
I want to an anchor link to jump to specific section in the same page using id hashtag. here is my 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分量:
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);
}
}
}
推荐答案
安装此软件包
ng2-page-scroll
导入到您的 app.module.ts
after import in your app.module.ts
import {Ng2PageScrollModule} from 'ng2-page-scroll';
@NgModule({
imports: [
/* Other imports here */
Ng2PageScrollModule
]
})
export class AppModule {
}
并在组件html中进行测试
and test in your component html
<a pageScroll href="#home">Testing</a>
<div id="home">
这篇关于角度的:如何使链接跳转到同一页面中的特定部分的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文