如何导航到 Angular 7 中的锚点

2024-06-19

我已经在routingModule和所有路径中启用了anchorScrolling,但是当我单击链接时没有任何反应。

'nav-bar.component.html'

<div id="mySidenav" class="sidenav" #sidenav>
   <a href="javascript:void(0)" class="closeBtn" 
   (click)="closeNav()">&times;</a>
   <a routerLink="/hazyMinds" [fragment]="'HazyMinds'">HazyMinds</a>
   <a routerLink="/ourGames" [fragment]="'Games'">Our Games</a>
   <a routerLink="/contact" [fragment]="'Contact'">Contact</a>
</div>
<span id="openNavBtn"  (click)="openNav()" #openBtn>&#9776;</span>



'app.component.html'

<app-nav-bar></app-nav-bar>
<app-hazy-minds id="HazyMinds"></app-hazy-minds>
<app-games id="Games" ></app-games>
<app-contact id="Contact"></app-contact>
<router-outlet></router-outlet>



'应用程序路由.module.ts'

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';

import {ContactComponent} from './contact/contact.component';
import {GamesComponent} from './games/games.component';
import {HazyMindsComponent} from './hazy-minds/hazy-minds.component';

const routes: Routes = [
  {path: '', redirectTo: '/', pathMatch: 'full'},
  {path: 'hazyMinds', component : HazyMindsComponent},
  {path: 'ourGames', component : GamesComponent},
  {path: 'contact', component : ContactComponent}
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'enabled',
      anchorScrolling: 'enabled',
      scrollOffset: [0, 64]
    }),
    CommonModule
  ],
  exports: [
    RouterModule
  ]
})


export class AppRoutingModule { }

我希望当我单击链接时它会自动滚动到正确的锚点。
有人知道我的代码有什么问题吗?谢谢


您可以为此使用片段:

this.router.navigate(['/results'], { fragment: 'top' });

//

<h1 id="top">asdasd</h1>

https://angular.io/api/router/NavigationExtras https://angular.io/api/router/NavigationExtras

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何导航到 Angular 7 中的锚点 的相关文章

  • 用 Angular 6 进行业力测试

    我正在尝试使用 npm 运行角度测试 ng test 但问题是 chrome 在测试完成后启动而不停止 所以我使用了 ng test watch false 但这会导致错误 Chrome 69 0 3497 Linux 0 0 0 ERRO
  • 使用 Tailwindcss 时焦点上的 Angular 15 Material 错误输入

    对焦前 对焦后 Problem 使用 Angular Mat v 15 和最新的 tailwindcss 在聚焦输入字段时存在错误 要重现该问题 ng new angular test cd angular test ng add angu
  • Rxjs 订阅方法被忽略

    在将其标记为重复之前 请注意这些都不适合我 问题1 https stackoverflow com questions 38142278 subscribe method is not triggered with rxjs 问题2 htt
  • 使用 DI 进行单元测试和模拟服务

    我已经为此苦苦挣扎了一段时间 希望有人能提供帮助 我有一个使用服务来获取数据的组件 我正在尝试向其添加单元测试 我的问题是测试总是失败并显示 错误 没有 Http 提供程序 这是我的代码 Service import Injectable
  • 获取对组件树上某种类型的所有指令的引用

    我有一个复杂的场景 需要帮助 我有一个指令 称为TagDirective 它被放置在我的应用程序中的多个元素上 我有另一个指令 QueryDirective 需要引用的所有实例TagDirective存在于其宿主元素以及层次结构中其上方的所
  • Ionic CSS 类分配

    我正在设计我的应用程序 熟悉基本的主题组件 SASS 等 但有一件突出且没有意义的事情是为什么当我在正在运行的应用程序中预览源代码时会添加大量额外的 CSS 类 就我而言 我只是想更改菜单标题背景 在我的 app html 文件中 我有
  • 使用 AngularFireObject 和 switchMap

    我真的不知道如何解决这个问题 我该如何修复这个错误 in user service ts import Injectable from angular core import AngularFireDatabase AngularFireL
  • 将嵌入的内容传递给嵌套列表的孙组件

    我知道有几个问题与此类似 但它们并不完全相同 我正在构建一个嵌套列表 我想在每个孙子中与常见 html 一起显示自定义 html 内容 当我在循环外部添加到 ListComponent 时 可以正常工作 但是如果我将其在循环内部传递给内部子
  • 如果不在异步测试执行区域内,fixture.whenStable() 实际上会在我的角度测试中执行任何操作吗?

    我最近读了很多关于角度测试的文章 这些对总是 async fixture whenStable 和 fakeAsync tick 但是您始终可以调用 fixtrue whenStable 因为它不是紧密耦合的 如果您在不使用异步实用程序来跟
  • 如何使用签名网址将文件上传到谷歌云存储桶

    我正在开发一个 Angular 应用程序 用于显示谷歌云存储桶的内容 对于后面 我在nodeJS中使用谷歌云功能 正如他们在上传文件的文档中提到的 我创建了一个函数来生成签名 url 但是当我使用签名 url 发送文件时 我在浏览器中收到了
  • 输入属性在 ngx-charts 模板中不起作用

    按照这个answer https stackoverflow com questions 47826641 ngx charts cant load bar charts directly with async pipe in angula
  • 如何将参数传递给 JHipster 中的自定义错误消息?

    我仍在学习 JHipster 所以今天我想自己进行一些验证练习 并尝试向我的前端发送有意义的错误消息 这是我尝试过的 在我的控制器中 我有以下内容 POST lessons Create a new lesson of 45 min if
  • Angular 2 从 Observable 获取项目的方法

    给定 Angular 2 服务中的以下 Typescript getLanguages return this http get this languagesUrl map res gt
  • JHipster:使用标准过滤实体 - 预期的 Angular 客户端方法

    我最近开始使用JHipster http www jhipster tech 感谢这个出色项目的维护者 在 JHipster 的当前版本 撰写本文时为 4 10 2 中 实体可以通过实体子生成器启用过滤 或者通过包含filter Entit
  • 角 2 材料容器固定不工作

    我对 CSS 和 Angular 2 材质有疑问 任何固定定位元素的行为都不像固定在 md sidenav container 内 如果它不在容器内 则它可以正常工作 这是该问题的链接 只需将 md toolbar 复制并粘贴到容器内部 您
  • 使用 angularfire2 在 Firebase 实时数据库上查询数据关系

    我需要查询评论并仅请求 userId 在评论中列出的用户 我在 Firebase 实时数据库中的数据库结构 comments c id1 commentId c id1 commentText text userId u id1 c id2
  • Angular 2 Final - 以编程方式更改 URL 上的路由参数

    假设我实际上是页面 结果 http server results dateFrom 03 11 2016 page 1 http server results dateFrom 03 11 2016 page 1 我作为结果页面 我想加载页
  • Spring Jsps 和跳转到锚点

    我想知道 Spring 中是否有某种方法可以在控制器中指定我希望将客户端发送到我用于视图的 jsp 页面中的特定锚点 我的 jsp 页面中有一个部分 由 errors锚点 显示发生的任何表单错误 每当我需要在模型验证失败后将它们发送回 js
  • 聚合物纸下拉菜单在浏览器中未正确呈现

    我对简单的纸张下拉菜单的渲染 html 遇到问题 列表项并不显示为样式化的 菜单 而只是出现在页面上的项目列表 单击渲染的纸张输入组件 渲染的下拉列表的一部分 确实会为波纹设置动画 但不会为菜单和菜单项的显示 隐藏设置动画 单击列表中的某个
  • Angular 8 webpack-bundle-analyzer 寻找错误的polyfill 文件

    无论我做什么 构建项目后我都会收到以下错误 Error parsing bundle asset

随机推荐