在 Angular2 (Typescript) 中实现动态路由 [重复]

2023-11-25

RouteConfig 类可用于装饰具有路由功能的组件(@RouteConfig),并为该组件定义了某些路由定义。现在,问题是在运行时(动态)注入这些路由定义。

原因是,假设我有一个应用程序,其中我必须显示(UI)并定义(装饰)“n”条路由,每个路由对应于加载应用程序的帐户,因此对应于与那个特定的帐户。因此,在组件的装饰器 @RouteConfig 中预定义路由定义没有任何意义。

我的方法是每次加载新帐户时都进行服务调用。仅检索关联的路由并在运行时注入它们,以便导航到与该帐户的 UI 中显示的每个路由相对应的其他相应组件。

import { Summary } from './components/summary';

@RouteConfig([
  /*
    Let's say we need a seller dashboard to be displayed...
  */
  //{ path: 'SellerDashboard', component: SellerDashboard }
  { path: '/', component: Summary }
])
class App {
    contactInfo: ContactInfoModel;
    public App(dataService: DataService) {
        this.model = dataService.getContactInfo();
    }
}

在上面的代码片段中,假设我希望加载与登录到我的应用程序的卖家帐户相对应的卖家仪表板。现在,显示销售点仪表板或与卖家不相关的任何内容没有任何意义(在我们的例子中,卖家的库存仪表板与卖家相关)。

简而言之,仅注入所需的路由,而不是在同一位置配置所有路由。

EDIT 1:

这个问题有一个简单的用例或场景,而不是这篇文章中标记的重复项(后来被问到)。这篇文章中提到的答案有更简单的方法,也更直观。


检查这个帖子:

http://blog.mgechev.com/2015/12/30/angular2-router-dynamic-route-config-definition-creation/

基本上作者创建了一个类DynamicRouteConfigurator使用 Reflect API 动态添加路由到@RouteConfig装饰师。

GitHub链接:

https://github.com/mgechev/dynamic-route-creator/blob/master/app/components/app/app.ts

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

在 Angular2 (Typescript) 中实现动态路由 [重复] 的相关文章

  • 带预览和进度栏的 Twitter Bootstrap 图像上传

    我如何使用 Twitter Bootstrap 上传带有预览和进度条的单个图像 目前 在保存图像之前 我看不到上传图像的任何预览或进度条 Jasny 的 Bootstrap 分支让您能够接近这一点 看文档 http jasny github
  • Javascript:在函数内调用函数时 window.location.href 不会重定向

    单击按钮时 window location href 会将浏览器重定向到 stackoverflow com 但在输入文本字段中按 Enter 键时不会将浏览器重定向到 stackoverflow com 尽管两个事件侦听器使用相同的函数
  • AES 在 cryptojs 中加密并在 python Crypto.Cipher 中解密

    使用 js CryptoJS 加密并使用 python crypto Cipher 解密时出现问题 这是我在js中的实现 附加 iv 与加密消息并使用 base64 进行编码
  • 如何在 Scala Play 框架中进行 Twitter 反向身份验证?

    我正在编写一个 play 应用程序 在 scala 中 并且正在尝试执行 twitter 此处概述的反向身份验证步骤 https dev twitter com docs ios using reverse auth https dev t
  • 使用 DataMapper 而不是 ActiveRecord [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 这种说法是否恰当。 if (0 != 表达式或变量) {} 在java中? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • Adobe Illustrator 中的折线简化如何工作?

    我正在开发一个记录笔划的应用程序 您可以使用定点设备来绘制笔划 在上图中 我绘制了一个笔划 其中包含 453 个数据点 我的目标是大幅减少数据点的数量 同时仍然保持原始笔画的形状 对于那些感兴趣的人 上图笔画的坐标可以作为GitHub 上的
  • 扩展Android应用程序类

    当我正在寻找从远程设备获取错误报告的解决方案时 就像 iOS 中的试飞应用程序一样 我发现了acra适用于 Android 设备here http code google com p acra wiki BasicSetup 在基本设置中
  • Turbolinks 访问的页面中缺少 hubspot 聊天界面,但可用于全页面刷新

    我想将 hubspot 聊天界面集成到我的 Rails 4 Turbolinks 应用程序中 我已将 Google 跟踪代码管理器配置为在每个页面加载事件中显示支持聊天界面 该界面工作正常 GTM 标签 自定义 html PROBLEM 当
  • 如何从 python 中的字符串中删除 ANSI 转义序列

    这是包含我的字符串的片段 ls r n x1b 00m x1b 01 31mexamplefile zip x1b 00m r n x1b 01 31m 该字符串是从我执行的 SSH 命令返回的 我无法使用当前状态下的字符串 因为它包含 A
  • 具有重复值的 Sqlite 列

    就说专栏吧aSQLite 数据库的非常重复 始终有相同的 4 个值 其他值可能稍后出现 但不同值的数量将少于 1000 个 VALUES hello world it s a shame to store this str many tim
  • Haskell:如何创建将函数应用于元组项的最通用函数

    这是一个个人练习 旨在更好地理解 Haskell 类型系统的局限性 我想创建最通用的函数 将某些函数应用于 2 条目元组中的每个条目 例如 applyToTuple fn a b fn a fn b 我试图让这个函数在以下每种情况下都起作用
  • Centos/Linux 将 logrotate 设置为所有日志的最大文件大小

    我们使用 logrotate 并且它每天运行 现在我们遇到了一些情况 日志显着增长 阅读 gigabaytes 并杀死我们的服务器 所以现在我们想为日志设置最大文件大小 我可以将其添加到 logrotate conf 中吗 size 50M
  • NHibernate:无状态会话错误消息无法获取代理

    我正在使用 nHibernate 无状态会话来获取对象 更新一个属性并将对象保存回数据库 我不断收到错误消息 无状态会话无法获取代理 我在其他地方有类似的代码 所以我不明白为什么这不起作用 有谁知道问题可能是什么 我正在尝试更新Screen
  • IIS 中的 WIX 和证书

    我正在尝试设置我的安装 以便使用 WIX 配置我的站点及其证书 我可以在 IIS 中查看证书并有权访问 cer 文件 这就是我对证书的了解 所以请简化任何答案 即我不知道我的 BinaryKey 是什么 该证书已安装在计算机上 理想情况下
  • 如何从我的 appDelegate 访问我的 viewController? iOS系统

    我有一个在 xCode 中创建为 基于视图的应用程序 的 iOS 应用程序 我只有一个 viewController 但它会自动显示 而且我没有看到任何将它与我的 appDelegate 关联的代码 我需要将数据从 appDelegate
  • .gitignore:如何忽略嵌套目录?

    我有以下目录结构 test a test b c test a b Ouput test c d e Output test f Output 我想忽略 test 下的所有 Output 目录 我试过test Output 但没有成功 我究
  • 如何在 Firefox 插件上使用 jQuery 1.5.2+?

    首先 我创建了一个接收参数并返回 jQuery 的函数 例如 function getjQuery window jquery code window return window jQuery 但后来我收到了一封评论电子邮件 他们告诉我必须
  • 使用 python/scipy 进行 voronoi 和 lloyd 松弛

    如何使用 Qhull 确定哪些 voronoi 单元 按索引 是 正确的 由 现有顶点 组成 我正在尝试使用 LLoyds 算法和 scipy spatial Voronoi 它是 Qhull 的包装器 生成的输入来执行约束松弛 就代码而言
  • 应用服务器如何注入私有字段?

    我看到这个问题 注入私有 包或公共字段或提供 setter https stackoverflow com questions 2021716 inject into private package or public field or p

随机推荐

  • 我可以重命名 numpy 记录数组中的字段吗

    我是 python 新手 所以这听起来可能很基础 我已经使用 csv2rec 导入了 csv 文件 第一行有标题 我想将标题更改为 x y z 这样做的最佳方法是什么 gt gt gt import matplotlib gt gt gt
  • Cython 中的内存视图排序

    如何在 Cython 中对内存视图进行就地排序 有没有内置函数可以做到这一点 现在我必须使用numpy数组代替并使用numpy的排序 这非常慢 为了跟进我的评论 这里有 3 个选项 numpy 和 C 和 C 标准库选项 from libc
  • 在seaborn中绘制回归时如何获得数值拟合结果

    If I use the seaborn library in Python to plot the result of a linear regression is there a way to find out the numerica
  • 未针对 Windows 配置 DefaultFirebaseOptions

    错误 flutter lib ui ui dart state cc 198 未处理的异常 不受支持的操作 尚未为 Windows 配置 DefaultFirebaseOptions 您可以通过再次运行 FlutterFire CLI 来重
  • 查找并替换字符串

    是否可以在页面加载之前查看页面的源代码 找到某个部分并将其替换为其他内容 我想使用 JavaScript 来完成此操作 以便我可以在 Chrome 扩展中使用它 所以像这样 找到 google com 替换为 yahoo com
  • 如何使用jquery联系叔叔

    div div div div div div 我在 me 我想选择我的叔叔 使用如下内容 me find uncle me next uncle me prev uncle How 你可以使用 parent and prev假设你的叔叔总
  • Visual Studio 2008 插件/加载项开发 - 入门

    和 关联这个计算器问题 我将如何创建自己的 Visual Studio 2008 插件 我查看了 MSDN 上的 Visual Studio 开发人员中心 但信息量巨大 项目类型繁多 我什至不知道从哪里开始 我应该从哪里开始寻找如果我想写一
  • na.locf 但不执行尾随 NA

    我有以下时间序列 gt y lt xts 1 10 Sys Date 1 10 gt y c 1 2 5 9 10 lt NA gt y 1 2011 09 04 NA 2011 09 05 NA 2011 09 06 3 2011 09
  • 如何在 Delphi 中以编程方式创建带有几个组件的表单

    我正在使用 Delphi 7 并尝试以编程方式创建表单 这是我的表单类存根 unit clsTStudentInfoForm interface uses Forms type TStudentInfoForm class TForm en
  • 为什么操作系统在内存足够的情况下却说无法给jvm分配内存

    我正在尝试使用以下命令启动一个新的 jvm java version 但是报错 There is insufficient memory for the Java Runtime Environment to continue Native
  • socket.io 套接字 ID 应该保密吗?

    我正在使用 socket io 开发一个 Web 应用程序 我目前正在使用套接字 ID 作为标识符 该标识符会广播给其他客户端 现在 这引发了安全问题 即该 ID 是否可用于劫持另一个用户会话 不幸的是 在网上很难找到这方面的任何信息 那么
  • 为什么分配给空列表(例如 [] = "")不会出错?

    在 python 3 4 中 我正在输入 并且它工作正常 没有引发异常 虽然当然 不等于 然后 也工作正常 但正如预期的那样引发了异常 但正如预期的那样引发了异常 发生什么了 你不是为了平等而比较 你是指派 Python 允许您分配给多个目
  • iOS模拟器不播放声音[重复]

    这个问题在这里已经有答案了 在 XCode 6 上 设备上一切正常 但在模拟器上 无法播放声音 这是我的快速代码 var url NSURL string http my url com sound mp3 var data NSData
  • 如何在 MySQL 数据库中存储 JSON 字符串

    我使用下面的代码将 JSON 数据存储在 MySQL 表中 如果 JSON 很短 它可以正常工作 但如果文本较长 则会中断 field json 是一个长文本 sql sprintf UPDATE mytable SET field jso
  • C# 获取控件在窗体上的位置

    当控件可能位于其他控件 如面板 内部时 是否有任何方法可以检索控件在表单中的位置 该控件的 Left 和 Top 属性只提供了它在其父控件中的位置 但是如果我的控件位于五个嵌套面板内 并且我需要它在窗体上的位置 该怎么办 快速示例 按钮 b
  • 为什么从 avi 容器解码帧并将其编码为 h264/mp​​4 不起作用?

    我开始使用 ffmpeg 我想将 avi 文件转换为 mp4 h264 文件 我读过很多帖子 包括this 但我找不到任何好的示例如何将帧保存到 mp4 文件 下面的代码是简化的代码 它从 avi 文件中解码帧并将其编码为 H264 mp
  • 内存中 C++ 对象的结构与结构

    如果我有一堂课如下 class Example Class private int x int y public Example Class x 8 y 9 Example Class 和一个结构如下 struct int x int y
  • 如何在Android P上使用apache http

    当我运行我的应用程序时安卓P设备 我收到一些这样的错误 java lang RuntimeException Unable to instantiate application com le android client LeApplica
  • 浮点数学有问题吗?

    考虑以下代码 0 1 0 2 0 3 gt false 0 1 0 2 gt 0 30000000000000004 为什么会出现这些不准确的情况 Binary 浮点数学就是这样 在大多数编程语言中 它基于IEEE 754 标准 问题的关键
  • 在 Angular2 (Typescript) 中实现动态路由 [重复]

    这个问题在这里已经有答案了 RouteConfig 类可用于装饰具有路由功能的组件 RouteConfig 并为该组件定义了某些路由定义 现在 问题是在运行时 动态 注入这些路由定义 原因是 假设我有一个应用程序 其中我必须显示 UI 并定