Angular2 - 如何使用具有动态 url 的路由器

2023-11-24

假设我有一个嵌套的 itemListComponent,它是 rootComponent 的子组件,使用以下模板:

<span *ngFor="#item of list">
    <a [routerLink]="[item.url]">{{item.title}}</a> |
</span>

由 Json 服务提供的路径 item.url 可能具有以下路径结构之一:

  • /category1/(内容 id)/(用破折号 (-) 连接的标题)
  • /category2/(内容 ID)/(用破折号 (-) 连接的标题)
  • /category3/(内容 ID)/(用破折号 (-) 连接的标题)

例子:

category2/987654/hello-world
category2/123456/hi-teacher
category3/554433/yo-brother

如何实现 @RouteConfig 以便这些链接使用 itemDetail 组件?

抱歉,如果这看起来不是很详细。我没有找到由具有完整路径(非组装路径)的服务提供的路由 url 的明确操作指南


尝试这个:

<span *ngFor="#item of list">
   <a [routerLink]="['/category', item.url]">
        {{item.title}}
   </a>
</span>

路线.ts:

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

Angular2 - 如何使用具有动态 url 的路由器 的相关文章

随机推荐

  • 绝对定位及其父元素

    我总是听说 当您使用绝对定位时 您想要充当其父级的元素需要有一个position of relative 我试图构建一个 CSS 下拉菜单 当我将其父元素设置为时 我正在努力让下拉菜单项拉伸超出主菜单项的宽度relative 下拉菜单项中的
  • 用户不活动时屏幕变暗

    我有一个应用程序 可以使用 4 个小时 但用户只需每 5 分钟需要进行一次输入或阅读屏幕 让手机进入睡眠状态并锁定屏幕有点烦人 所以我有两个选择 getWindow addFlags WindowManager LayoutParams F
  • svg 到 png 不起作用,怀疑 svg 元素差异

    我无法弄清楚为什么两个不同的 svg 会导致我的 javascript 在一个实例中工作 但在另一个实例中不起作用 我只交换了两个示例中的 svg 元素 一个有效 一个无效 这是两个 jsFiddles 中的代码 我从中得到的工作示例her
  • 在 Groovy/Java 中比较两个 XML 字符串/文件

    我正在编写单元测试来检查一些 XML 构建器 现在我遇到了预期结果和实际结果之间的语法差异问题 尽管它们的语义相同 Example 预期结果 您可以使用 GroovyXMLUnit像这样的实用程序 XMLUnit setIgnoreWhit
  • 如何根据选定的注释移动 MKMapView

    我有一个 MKMapView 它填充了我的整个视图 但是当选择一个图钉时 我会在地图顶部向上滑动另一个视图 我想移动地图 以便图钉出现在地图可见区域的中心 很难解释 但希望它是有道理的 提前致谢 您可以尝试从visibleMapRect对于
  • 将 jquery 函数包装在闭包中有什么好处?

    嗨 我一直忙于将我的 JQuery 知识提升到一个新的水平 到目前为止 我认为我已经理解了所有内容 但是当我冒险学习更高级的教程时 我注意到有几个实例 其中 JQuery 例程被包装在一个闭包 见下文 然而 让我困惑的是它传递一个 并返回
  • SQL 将结果连接到 codeigniter 中的对象中

    好的 一些背景知识 刚刚进入 codeigniter 不喜欢 sql 和服务器端脚本 我知道什么是连接 我第一次拥有多对多数据库 这是因为连接通常会产生以下示例 但我想解析它 而不必构建代码来忽略重复 这是一个 3 表连接示例 当我加入更多
  • 合并同一项目的两个git存储库

    我目前是唯一一位从事我从前任接手的项目的开发人员 当我接手这个项目时 它还没有受到源代码控制 因此 我创建了一个新的 git 存储库 对状态进行了初始提交 并从此开始对其进行处理 但最近我在备份中发现了同一个项目的一个古老版本 它实际上是一
  • 通过Windows C++让鼠标通过

    我正在开发一个 Win32 C 应用程序 我想忽略鼠标事件并让其传递到我的窗口下方的窗口 基本上我下面的窗口将处理鼠标事件 我不想使用 SendMessage 将鼠标消息发送到我下面的窗口或使用 SetCapture 有没有一种方法可以基本
  • 在 Dask 中排序

    我想找到替代方案pandas dataframe sort value在 dask 中运行 我走过来了设置索引 但它会按单个列排序 如何对 Dask 数据框的多列进行排序 目前为止Dask似乎还不支持多列排序 但是 创建一个新列来连接已排序
  • 找不到文件:mainwindow.obj

    我创建了一个 GUI 应用程序 gt QMainWindow 我在菜单 插槽中添加了 1 项 我创建了一个新项目 gt QDialog 我使用插槽方法尝试显示创建的对话框 但出现以下错误 mainwindow obj 1 错误 LNK201
  • 有没有办法了解“平台”访问网页的硬件资源?

    我希望能够从网页中了解浏览器的硬件资源 或者至少是一个粗略的估计 即使您检测到现代技术的存在 例如csstransforms3d csstransitions requestAnimationFrame 在浏览器中通过类似的工具Modern
  • Python,多线程太慢,多进程

    我是多处理新手 我了解一些有关线程的知识 但我需要提高计算速度 希望通过多重处理 示例说明 将字符串发送到线程 更改字符串 基准测试 将结果发回打印 from threading import Thread class Alter Thre
  • 将多维Json数组解析为Python

    我第一次尝试解析 JSON 并处理多维数组 这让我不知所措 secret Hidden minutes 20 link http www 1 com bookmark collection free link name free link
  • 在 Guice 中绑定,无需

    我有个问题 通常在Guice中我使用bind class to 另一个类实现 但是我在代码源中发现他们仅使用了bind class 没有 to another class Implementation 部分 这是什么意思 bind clas
  • 如何用关系代数求 MAX?

    使用数据库时 如何使用关系代数求 MAX 假设您有一个关系 A 具有单个属性 a 减少一个更复杂的关系是关系代数中的一个简单任务 我确信您已经做到了这一点 所以现在您想要找到最大值A 中的值 一种方法是找到 A 与其自身的叉积 请务必重命名
  • 从定期异步请求创建 observable

    我想要一种将异步方法转换为可观察方法的通用方法 就我而言 我正在处理使用的方法HttpClient从 API 获取数据 假设我们有方法Task
  • 为什么在 Ruby 中应该避免使用 then 关键字?

    一些 Ruby 风格指南中提到 您应该 永远不要使用 就我个人而言 我认为 then 关键字可以使代码更密集 这往往更难阅读 这个建议还有其他理由吗 我几乎从不使用then关键词 然而 有一种情况我认为它极大地提高了可读性 考虑以下多条件
  • 除了 new object() 之外,还有什么理由要锁定其他东西吗?

    object theLock new object lock theLock 我总是用一个new object 为此 但我想知道 是否有任何情况下您会锁定更具体的类型 在我看来 任何引用类型都可以被锁定 使用虚拟对象的原因是为了避免常见的锁
  • Angular2 - 如何使用具有动态 url 的路由器

    假设我有一个嵌套的 itemListComponent 它是 rootComponent 的子组件 使用以下模板 span a item title a span 由 Json 服务提供的路径 item url 可能具有以下路径结构之一 c