Angular 2 - 锚链接到当前页面上的元素[重复]

2024-03-03

如果问题标题不清楚,我有一个带有某些“链接”部分的网页,因此有人可以单击该链接并转到同一模板上的元素。这并不一定意味着更改 URL。

我尝试过的要点:

<a href="#sectionA>Section A</a>
<a href="#sectionB>Section B</a>
<a href="#sectionC>Section C</a>
<br/>
<div id="sectionA">
   <p> Content for A </p>
</div>
<div id="sectionB">
   <p> Content for B </p>
</div>
<div id="sectionC">
   <p> Content for C </p>
</div>

这种方法不起作用,因为单击链接会将我导航到 baseUrl/#sectionA (不存在的路由),而不是页面所属组件的路由 (baseUrl/currentPage#sectionA)。

第一种方法失败了,我尝试了以下方法:

<a href="currentPage#sectionA>Section A</a>
<a href="currentPage#sectionB>Section B</a>
<a href="currentPage#sectionC>Section C</a>

这实际上适用于当前页面,将用户滚动到当前页面上的部分;遇到的问题是当我们有一个使用相同组件和模板的子路由时。本质上,导航到“baseUrl/currentPage”会将您带到一个空表单。例如,如果用户导航到“baseUrl/currentPage/1”,我们希望表单中填写 1 的数据,即 ID。

我希望用户单击此侧面上下文菜单中的锚点以导航到 currentPage 和 currentPage 的参数化路由(currentPage/1、currentPage/31 等)所使用的模板上的部分。不重要的是 URL 中引用模板的部分。我只关心导航方面对父级及其子级是否有效。最好不必使用第三方 Angular 插件。

非常感谢所有建议和意见。

编辑: 为上下文添加组件路由:

export const CurrentComponentRoutes: Route[] = [
  {
    path: 'currentPage',
    component: CurrentComponent
  },
  {
    path: 'currentPage/:ID',
    component: CurrentComponent
  }
];

以上路由导出到主app.component路由:

export const appRoutes: Routes = [
  ...CurrentComponentRoutes,
  ...OtherRoutes
];

export const routing: ModuleWithProviders = RouterModule.forRoot(approot);

Export routing然后导入到主app.module中。另外,我在index.html文件中设置了base href。


与pe8ter的答案相关,似乎它也可以通过[routerLink]激活

请看看这是否有帮助Angular2 使用主题标签路由到页面锚点 https://stackoverflow.com/questions/36101756/angular2-routing-with-hashtag-to-page-anchor

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

Angular 2 - 锚链接到当前页面上的元素[重复] 的相关文章

  • Angular 2:基于环境导入服务

    根据 Angular CLI 项目中的当前环境导入服务的最佳 正确方法是什么 我已经设置了一个名为 dev mock 的新环境 我可以使用它来调用 ng serve environment mock 然后我使用 useClass 在模块中设
  • 如何防止 iframe 中的链接在新选项卡中打开

    我为我制作的基于网络的操作系统制作了一个基于网络的小型网络浏览器 我注意到在某些网站中 它们有喜欢在新选项卡中打开的链接 有没有办法可以防止这种情况并在 iframe 中打开链接 这是我的整个浏览器的代码 以防万一
  • html 空格引起的非常奇怪的错误

    我在 Firefox 中遇到了一个非常奇怪的错误 我在外部文件中有一个 javascript 函数 可以在常规复杂性网站上完美运行 然而 我一直在整理一些演示示例并遇到一些奇怪的事情 html 格式如下 在编辑器中 div p Q Wher
  • 如何在ionic 2中创建覆盖页面?

    当我进入新页面时如何创建透明的引导覆盖页面 我如何在 ionic 2 中实现 您可以在外部创建 div
  • 根据复选框和数据元素隐藏/显示表格行

    我想隐藏表中的行 因为我选中了复选框并且该数据元素在表中不正确 另一个实验 我还可以使用数据元素进行排序并按下拉列表排序 查看 tr 标签 价格 名称 评级 吗 div class filter list div
  • 滚动时输入自动完成位置错误(chrome)

    我在输入文本的默认自动完成功能方面遇到了一些麻烦 滚动时它不会相应移动 我希望自动完成文本保留在输入的正下方 有办法做到这一点吗 我在 Chrome 浏览器版本 57 0 2987 133 中发生这种情况 fiddle https jsfi
  • 如何向我的网站添加 Google 搜索框?

    我正在尝试将 Google 搜索框添加到我自己的网站 我希望它搜索谷歌本身 而不是我的网站 我曾经有一些代码可以工作 但现在不再工作
  • HTML 属性不带引号?

    我一直认为html的属性中需要引号 div class service definition or div class service definition 但最近我注意到 w3 验证器不会将以下内容识别为错误 div class serv
  • 创建一个简单的 10 秒倒计时

    我想要一行这样写的 Your download will begin in 10 9 8 etc Beginning on page load seconds 我已经设置了 10 秒下载文本 并且我还查看了其他 stackoverflow
  • Angular 6 中的 Http 错误处理

    我正在尝试使用 Angular 6 中的以下类来处理 http 错误 我从服务器收到 401 未经授权状态 但我没有看到控制台错误消息 HttpErrorsHandler ts 文件 import ErrorHandler Injectab
  • 如何在 font Awesome 图标链接下方添加添加文本?

    我正在尝试在我的 Blogger 模板中的 font awesome Icons 下添加一些文本 这是我想要实现的目标的图像 我想要实现的外观图片 https i stack imgur com BVYlh png 但到目前为止我已经做到了
  • 构建:找不到“节点”的类型定义文件

    VS 2015 社区版 在家 npm 3 10 Angular 2 我试图在 ASP Net MVC 5 应用程序中获取 Angular2 设置 我开始使用的模板使用旧版本的 Angular 因此我更新了包引用 当我构建时 列表中的第一个错
  • Perl:HTTP::微小删除留下损坏的锚标记

    我编写了一个脚本 该脚本收集从数据库读取的缓冲区内的所有 URL 检查该页面是否仍然存在 并使用 HTTP Tiny 从缓冲区中删除 URL 如果该 URL 无法访问或返回无效 问题是 HTTP Tiny 删除左锚标记 例如此处无效的文本
  • html css 下拉菜单

    这是我第一次在 Stack Overflow 上发帖 我不熟悉论坛发帖规定 所以请让我知道我做错了什么 我在论坛中研究过这个问题 但我所遇到的一切都没有给我明确的答案 我试图从 新闻 元素创建一个下拉菜单 但在运行代码时我从未得到任何可见的
  • 引导行之间的垂直间距

    所以我正在研究布局 为了 响应能力 我决定使用 Bootstrap 现在我猜网格系统有问题 我想要的结果如下 1 4 2
  • 计算文本选择的 xy 位置

    我正在尝试使用 DOM 元素创建自己的文本选择 是的 我的意思是当您在此元素中选择文本时 您会在文本后面看到蓝色背景 这个想法是停止默认行为 蓝色 并使用我自己的元素来完成工作 方法是找到选择的 xy 位置 然后放置绝对定位的元素 我希望能
  • HTML 元素的默认背景颜色是什么?白色还是透明?

    我只是被一个简单的问题困住了 想弄清楚 HTML 元素的默认背景颜色是什么 是白色的还是透明的 默认背景颜色是透明的 看这里 https developer mozilla org en docs Web CSS background co
  • 如何在html中制作多行类型的文本框?

  • HTML 输入 - 名称与 ID [重复]

    这个问题在这里已经有答案了 使用 HTML 时
  • Angular Libraries Monorepo:是否可以为每个库使用不同的版本?

    只是一个简单的问题 我似乎找不到答案 我正在尝试构建一个应该能够使用 angular cli v8 的 monorepo 但仍然能够编译和构建为 v2 v3 v4 等制作的库 主要是组件和服务 版本之间发生了很多变化 所以让我们举个例子 V

随机推荐

  • QtSql 应用程序无法在已部署的计算机上运行

    我用 Qt C 做了一个软件 我需要将其部署在Windows 7 64位 上 这也是我开发软件的主机 问题是我的软件可以与开发的机器上的sqlite数据库交互 但是当我尝试在其他机器上部署我的软件时 它无法与那里的数据库交互 我也尝试使用
  • 两个 Spring Boot 项目都带有 @SpringBootApplication

    我有一个数据项目和 UI 项目 这两个项目都是 Spring Boot 应用程序 两个项目都有相同的根包 com myorg 其主类注释为 SpringBootApplication 数据项目的主类是 package com myorg S
  • 协议缓冲区中缺少带有协议的输入文件

    目前 我的 protoc exe 旁边有一个名为 addressbook proto 的文件 我在生成 h 和 cc 文件时遇到困难 这就是我正在做的事情 protoc cpp out c addressbook proto 但是我得到以下
  • Visual Studio 2010 SP1 中的 .ASPX 文件不会启动自动大纲(可折叠部分)

    在 Visual Studio 2010 SP1 中 当我打开 ASPX 文件时 不会启用自动大纲 对于打开的每个文件 我需要单击编辑 大纲 开始自动大纲 这非常烦人 当打开纯代码 非 ASPX 文件时 无需执行此步骤 我使用了一些扩展 全
  • Breeze.js:在没有反向 rel 的情况下将元素添加到导航属性集合会引发异常 [无法获取属性“名称”的值]

    我的 EDM 中有两个实体 Application and Address几乎类似于以下内容 class Application ICollection
  • 如何在 Java 应用程序中显示图像

    我想在我的 Java 应用程序中显示图像 我找到了从网络服务器下载图像并将其显示在 jframe 中的代码 我想使用标签来显示图像或其他内容 不应该是JFrame 这是我的代码 Image image null try URL url ne
  • javafx 图像与 Base64 之间的转换

    我正在尝试将项目数据 图像 参数等 保存在保存文件中 我发现的方法是将所有数据合并到 XML 文件中 因此我决定将图像转换为 Base64 字符串 这里的障碍是我不知道如何从字符串中获取图像 File file new File image
  • 在 32 位保护模式/MSVC 内联汇编中获取 FS:[0] 的线性地址

    我在 Visual C 内联汇编中使用了这条指令 lea eax FS 0 Why did eax得零分吗 我如何获得线性地址FS 0 假设 FS 指向 Windows线程信息块 https en wikipedia org wiki Wi
  • C#:SHDocVw.WebBrowser_V1 在哪个程序集中定义?

    它在几个网站上使用 这些网站似乎都假设读者知道如何才能使用这种类型 但我不知道 示例站点 请参阅第一条评论 http blogs artinsoft net mrojas archive 2008 09 18 newwindow2 even
  • 为什么 jsx 中的三元运算符不起作用

    我有一个反应组件 在其中我想使用三元运算符显示一个子组件 这似乎不起作用 这是我的代码 import React Component from react import HeaderProduct from components heade
  • 如何删除使用 django-ckeditor 上传的图像?

    我已经在 Django 管理界面的 CKEditor 中上传了一些图像 我可以通过单击编辑器中的 图像 按钮来浏览和选择图像 然后在弹出的窗口中单击 浏览服务器 这是弹出窗口的屏幕截图 我的问题是 如何删除服务器上的图像 不幸的是这是真的
  • “Enter-PSSession -Session”,阻止调用进程,直到用户键入“exit”

    我在将 New PSSession 与 Enter PSSession session 结合使用时遇到问题 也就是说 在用户在交互式 PSSession 中键入 exit 之前 无法阻止调用进程 这是一个代码示例 s New PSSessi
  • React-router 不会在不同路径上重新挂载组件

    我的反应应用程序中有一个组件 它是一个表单 该表格用于创建新许可证或编辑现有许可证 无论哪种方式 它都只是一个组件 它会检查 componentDidMount 是哪个 pageType 添加 更新 现在我的问题是 当我使用表单编辑许可证
  • 在 C# 中枚举 Collection 的子集?

    在 C 中是否有一种好方法可以仅枚举 Collection 的子集 也就是说 我有大量对象的集合 例如 1000 个 但我只想枚举元素 250 340 有没有一种好方法可以获取集合子集的枚举器 而无需使用另一个集合 编辑 应该提到这是使用
  • 如何从 Java 7 调用 Kotlin 挂起协程函数

    我正在尝试从 Java 7 调用 Kotlin 函数 我正在使用协程 并且这个被调用的函数正在挂起 例如 suspend fun suspendingFunction Boolean return async longRunningFunc
  • Scala 元组列表到平面列表

    我有元组对列表 List String String 并想将其展平为字符串列表 List String 一些选项可能是 连接 list map t gt t 1 t 2 一个接一个交错 在您发表评论后 您似乎在要求这个 list flatM
  • 计算一系列值的 RGB 值以创建热图

    我正在尝试用 python 创建热图 为此 我必须为可能值范围内的每个值分配一个 RGB 值 我想将颜色从蓝色 最小值 更改为绿色到红色 最大值 下面的图片示例解释了我对颜色组合的看法 我们的范围是从 1 纯蓝色 到 3 纯红色 2 介于两
  • Angular2的ng-select如何实现分组?

    我正在实现多个选择下拉菜单Angular2项目按照这个link https plnkr co edit JcG8uO9nIfSGMEKdLf0Y p preview 但现在我必须在这个多选下拉列表中显示分组 那么我该如何实现呢 或者有其他插
  • Javafx 橡皮筋调整大小错误

    所以 我的橡皮筋课上有一个错误 但我似乎无法修复它 我基本上做的是 我有一个边框窗格 它是我想要调整大小的节点的外部窗格 我为这个 borderpane 指定一个宽度为 1 像素的边框 查看 css 我还为这个边框面板分配了 4 个矩形 每
  • Angular 2 - 锚链接到当前页面上的元素[重复]

    这个问题在这里已经有答案了 如果问题标题不清楚 我有一个带有某些 链接 部分的网页 因此有人可以单击该链接并转到同一模板上的元素 这并不一定意味着更改 URL 我尝试过的要点 a href Section B a a href p Cont