在使用 Angular 构建单页应用时，经常会遇到路由与锚点冲突的问题。比如，我们可能需要使用网页的锚点功能来实现页面跳转或滚动到指定位置，但是这会与 Angular 的路由功能冲突，导致页面跳转错误或者路由无法正常工作。那么，如何解决这个问题呢？本文将介绍一些解决方案及其实现方法。
解决方案一：使用 Angular 的导航功能
Angular 提供了自带的导航功能，可以用来实现锚点跳转和页面滚动等基本功能。我们可以使用 routerLink 或者 router.navigate 方法来实现导航，而不需要使用浏览器默认的锚点跳转。这样就可以避免路由与锚点的冲突。
路由导航
Angular 的最主要的路由导航API都在 router 模块中。首先，在进入组件实例的构造函数中注入 Router 对象：
import { Router } from '@angular/router';
constructor (
private router: Router
) {}这里我们使用了 typescript 的构造函数注入方式，只需声明依赖他会在创建实例的时候自动注入。这样，我们就可以在组件中使用 router.navigate 方法进行路由导航了。router.navigate 方法接收一个数组参数，第一个参数是路由路径，之后可以传递一个路由参数对象。
goToPage(id: number) {
this.router.navigate(['/pages', id]);
}路由链接
在 HTML 模板中使用 routerLink 可以实现导航链接跳转。下面是一个例子：
<nav> <a routerLink="/">Home</a> <a routerLink="/about">About</a> </nav>
当用户点击这些链接时，Angular 会处理路由并导航到相应的组件。
解决方案二：使用 Angular 的 HashLocationStrategy
如果我们需要使用浏览器默认的锚点跳转，可以使用 Angular 提供的 HashLocationStrategy。这种策略会在 URL 中添加一个 # 符号，来表示当前的页面状态，并且会绕过路由器对浏览器历史记录的控制，所以浏览器后退和前进不会触发路由跳转。
配置
想要使用 HashLocationStrategy，我们需要在 app.module.ts 中引入响应的模块，并在路由模块中添加 HashLocationStrategy。具体步骤如下：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------- ------- --------------------- ----------------- ---- ------------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- ------------------------
------ - -------------- - ---- --------------------------
----- ---------- ------ - -
- ----- --- ---------- ------------- --
- ----- -------- ---------- -------------- --
--
-----------
------------- -
-------------
--------------
--------------
--
-------- -
--------------
-------------------------------
--
---------- ---------- ----------------- --------- -----------------------
---------- --------------
--
------ ----- --------- - -如上代码，我们可以发现，在providers数组中，我们把 LocationStrategy 指定为了 HashLocationStrategy，并在 NgModule 的 bootstrap 属性指定了根组件 AppComponent。这样，我们就可以在应用中使用 HashLocationStrategy 了。
示例
我们通过代码示例来演示一下如何使用 HashLocationStrategy。
-- -------------------- ---- -------
----
------ ------------------------ ----------
------ ------------------------ ----------
------ ------------------------ ----------
-----
---- ------- ---
-- ------------------
----------- ------
----------------
-- ------------------
----------- ------
----------------
-- ------------------
----------- ------
----------------这是一个带有锚点的页面示例，在点击链接时，页面会滚动到相应的位置。而通过在 app.module.ts 配置 HashLocationStrategy，我们就可以在 URL 中添加 # 符号，并且保证路由不会影响到锚点的使用。
结论
以上就是针对 Angular 路由与锚点冲突的问题两种解决方案，我们可以根据具体的业务场景来选择使用哪种方案。本文介绍了路由导航、路由链接和 HashLocationStrategy 这三种方式的使用方法，希望对大家在开发过程中遇到类似情况时有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ee289d77d675cfffd4043e