在 Angular 6 中使用 HTML 锚链接#id
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50836497/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using HTML anchor link #id in Angular 6
提问by eirenaios
I am working with Angular 6 project in which I have disabled/removed hash-location-strategy which removes # from URL.
我正在使用 Angular 6 项目，在该项目中我已禁用/删除了从 URL 中删除 # 的 hash-location-strategy。
due to this change the link having:
由于此更改，链接具有：
<li routerLinkActive="active">
<a [routerLink]="['/settings']">Contact Settings</a>
<ul class="child-link-sub">
<li>
<a href="#contactTypes">Contact Types</a>
</li>
</ul>
</li>
is no more working it just skips current components URL and puts #contactTypes after localhost.
不再工作，它只是跳过当前组件 URL 并将 #contactTypes 放在 localhost 之后。
I found this linkwhich should solve the issue using
我发现这个链接应该可以解决这个问题
<a [routerLink]="['/settings/']" fragment="contactTypes" >Contact Types</a>
which puts #contactTypes at the end of the URL but it doesn't scroll to the top of the browser.
它将 #contactTypes 放在 URL 的末尾，但它不会滚动到浏览器的顶部。
回答by Machado
Angular 6.1 comes with an option called anchorScrollingthat lives in router module's ExtraOptions. As the anchorScrollingdefinitionsays:
Angular 6.1 带有一个名为的选项，该选项anchorScrolling位于路由器模块的ExtraOptions. 正如anchorScrolling定义所说：
Configures if the router should scroll to the element when the url has a fragment.
'disabled'-- does nothing (default).
'enabled'-- scrolls to the element. This option will be the default in the future.Anchor scrolling does not happen on 'popstate'. Instead, we restore the position that we stored or scroll to the top.
配置当 url 有片段时路由器是否应该滚动到元素。
'disabled'-- 什么都不做（默认）。
'enabled'-- 滚动到元素。此选项将成为未来的默认选项。'popstate' 上不会发生锚滚动。相反，我们恢复我们存储的位置或滚动到顶部。
You can use it like that:
你可以这样使用它：
const routerOptions: ExtraOptions = {
useHash: false,
anchorScrolling: 'enabled',
// ...any other options you'd like to use
};
// then just import your RouterModule with these options
RouterModule.forRoot(MY_APP_ROUTES, routerOptions)
回答by Joel Joseph
I was looking for a similar solution and tried to use the ngx-scroll-topackage and found that its not working in latest version of angular so decided to look into other option and found that we can use scrollIntoView
我正在寻找类似的解决方案并尝试使用ngx-scroll-to包，发现它在最新版本的 angular 中不起作用，因此决定研究其他选项并发现我们可以使用scrollIntoView
HTML code :
HTML代码：
<button (click)="scrollToElement(target)"></button>
<div #target>Your target</div>
Ts code :
代码：
scrollToElement($element): void {
console.log($element);
$element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}
回答by svassr
For accessibility reasons I had to a link at the beginning of the document to provide direct access to the content to user using a screen reader, skipping that way parts of the page repeating from page to page.
出于可访问性的原因，我必须在文档开头添加一个链接，以便使用屏幕阅读器向用户提供对内容的直接访问，从而跳过页面的某些部分在页面之间重复。
As I needed the link to stay focusable (preferably keeping the href attribute), as I was actually outside the app-root or any component (still solution works inside a component), to do that I used simple good old fashion html and javascript :
因为我需要链接保持焦点（最好保持 href 属性），因为我实际上在 app-root 或任何组件之外（仍然解决方案在组件内工作），为此我使用了简单的旧时尚 html 和 javascript ：
<a href="./#content"
onclick="event.preventDefault(); location.hash='content';"
class="content-shortcut"
title="Access page content directly"
i18n-title
aria-label="Access page content directly"
i18n-label>Access page content directly</a>
<style>
.content-shortcut {
position: absolute;
opacity: 0;
height: 0px;
font-size: 1px;
}
.content-shortcut:focus,
.content-shortcut:active {
position: relative;
opacity: 1;
height: auto;
font-size: 1em;
display: block;
color: black;
background: white;
}
</style>
回答by Bhavesh Suwalka
You need to use hash routing strategy to enable the hash scrolling.
您需要使用哈希路由策略来启用哈希滚动。
you need to give second argument as an object like RouterModule.forRoot([],{useHash:true}}. It will work.
您需要将第二个参数作为像 RouterModule.forRoot([], {useHash:true}} 这样的对象。它会起作用。
回答by user7185558
use ngx page scroll
使用ngx 页面滚动
<a pageScroll href="#awesomePart">Take me to the awesomeness</a>
<h2 id="awesomePart">This is where the awesome happens</h2>
回答by Alex Walker
As pointed out by Nitin Avula in a comment, using routerLinkfor a hash anchor only works if you are navigating to a different route or have onSameUrlNavigationenabled in your router config.
正如 Nitin Avula 在评论中指出的那样，routerLink仅当您导航到不同的路由或onSameUrlNavigation在路由器配置中启用时，才可以使用哈希锚。
A way to get round this is to get rid of routerLinkand instead use this.router.navigatein your *.component.tsfile with the fragmentparameter:
解决此问题的一种方法是删除routerLink并this.router.navigate在您的*.component.ts文件中使用fragment参数：
HTML -
HTML -
<a (click)="scrollToContactTypes()">Contact Types</a>
TypeScript -
打字稿 -
constructor(private router: Router) { }
scrollToContactTypes() {
this.router.onSameUrlNavigation = "reload";
this.router.navigate(["/settings"], { fragment: "contactTypes" }).finally(() => {
this.router.onSameUrlNavigation = "ignore"; // Restore config after navigation completes
});
}
