gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 10:33:27 26 4
gpt4 key购买 nike

问题陈述

我似乎无法在 <a> 中使用内部链接标记以通过 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"> .它基本上链接到另一个文档,并转到该站点的特定部分,但是,它对我不起作用。


  • 我的代码

    这是我链接的页面:
    <a href="../products/products.component.html#backToTopBtn"><button mat-raised-button class="productsServicesBtn">Products
    <br>Services</button></a>

    这是我要链接到的页面:
    <body>
    <button mat-raised-button id="backToTopBtn">Back to Top</button>
    </body>

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

    代码说明

    如您所见,我正在使用第二个网站告诉我在 href 中执行的操作。使用链接末尾的 HTML ID 告诉浏览器要转到哪个部分。这没用。

    仅供引用 ,末尾的ID称为“片段标识符”。

    预期结果

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

    实际结果

    该链接什么都不做,也不会去任何地方。

    最佳答案

    首先,您应该使用 routerLink 设置您的链接。指示。

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

    这是假设您已经设置了路线。你应该阅读 routing如果不。
      { path: 'products', component: ProductsComponent }

    其次,您通过 fragment 指定片段routerLink 指令的输入:
    <a routerLink="/products" fragment="backToTopBtn">
    <button mat-raised-button class="productsServicesBtn">
    Products<br>Services
    </button>
    </a>

    最后,您需要在导入路由器模块时启用 anchor 滚动,因为默认情况下禁用滚动到片段:
    imports: [
    RouterModule.forRoot([
    { path: 'products', component: ProductsComponent }
    ], { anchorScrolling: 'enabled' })
    ]

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

    关于html - 如何使内部链接转到另一个组件的 ID 元素 - Angular,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60303265/

    26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com