如何使内部 link 转到另一个组件的 ID 元素 - Angular

Question

问题陈述

我似乎无法使用 <a> 标记中的内部 link 通过 HTML ID 转到另一个组件的特定部分。

我试过的

我访问了这个站点：https://www.w3schools.com/html/html_links.asp，但没有发现与我正在做的事情相关的任何内容。
另外，我去了这个网站 https://www.yourhtmlsource.com/text/internallinks.html 并找到了与我的问题相关的东西。该部分称为：“链接到其他文档的部分”，这似乎不起作用：<a href="http://www.yourhtmlsource.com/text/internallinks.html#section-names">。它基本上 links 到另一个文档，它转到该站点的特定部分，但是，唉，它对我不起作用。

我的代码

这是我link来自的页面：

<a href="../products/products.component.html#backToTopBtn"><button mat-raised-button class="productsServicesBtn">Products
      <br>Services</button></a>

这是我要 link 到的页面：

<body>
  <button mat-raised-button id="backToTopBtn">Back to Top</button>
</body>

请注意：这是两个不同的 Angular 组件。

代码说明

如您所见，我正在使用第二个网站告诉我在 href 中执行的操作，并在 link 末尾使用 HTML ID 来告诉浏览器去哪个部分。它不起作用。

仅供参考，末尾的 ID 称为“片段标识符”。

预期结果

“internal”link 打开另一个页面并转到我提到的特定部分。

实际结果

link什么也不做，哪儿也不去。

Answer 1

编辑：我添加了片段

你不应该 link 到 ./products.component.html 因为它在运行时（在浏览器中）不存在。

你应该 link 使用 routerLink

的路线

 <a routerLink="/product" fragment="backToTopBtn">services</a>

检查 angular 文档 Routing and navigation

Answer 2

首先，您应该使用 routerLink 指令设置您的链接。

<a routerLink="/products">
  <button mat-raised-button class="productsServicesBtn">
    Products<br>Services
  </button>
</a>

这是假设您已经设置了路线。如果没有，你应该阅读 routing。

  { path: 'products', component: ProductsComponent }

其次，您通过 routerLink 指令的 fragment 输入指定片段：

<a routerLink="/products" fragment="backToTopBtn">
  <button mat-raised-button class="productsServicesBtn">
    Products<br>Services
  </button>
</a>

最后，您需要在导入路由器模块时启用锚点滚动，因为默认情况下禁用滚动到片段：

imports: [
  RouterModule.forRoot([
    { path: 'products', component: ProductsComponent }
  ], { anchorScrolling: 'enabled' })
]

演示：https://stackblitz.com/edit/router-template-4uagmq

如何使内部 link 转到另一个组件的 ID 元素 - Angular

How to make internal link to go to another component's ID element - Angular

html

angular-routing

angular