以编程方式进行角度导航(router.navigate)。错误:无法匹配任何路由

2023-12-23

尝试以编程方式在组件内部导航到另一个路由路径,但出现错误(错误错误:未捕获(承诺):错误:无法匹配任何路由。网址段:).

有应用程序的下一个结构:

app.module.ts
main.module.ts
     milestone.ts

const mainRoutes: Routes = [
  {
    path: '',
    component: MainComponent,
    canActivate: [LoggedInGuard],
    children: [{
      path: '',
      component: ContentComponent
    },
      {
        path: 'milestone/:milestoneId',
        loadChildren: './content/milestone/milestone.module#MilestoneModule',
        canActivate: [MilestoneGuard]
      }],
  }
];

in main.module.ts in imports部分:

@NgModule({
  imports: [
    ...............
    RouterModule.forChild(mainRoutes)
  ],

和里程碑路线:

const milestoneRoutes: Routes = [
  {
    path: '',
    component: MilestoneComponent,
    canActivate: [LoggedInGuard],
    children: [{
      path: '',
      redirectTo: 'qa/documents',
      pathMatch: 'full'
    },
      {
        path: 'qa/documents',
        component: qaDocumentsComponent
      },
      {
        path: 'home/documents',
        component: homeDocumentsComponent
      }
    ]
  }
];

里程碑.module.ts

    @NgModule({
      ..........
      RouterModule.forChild(milestoneRoutes)
      ],

里程碑.component.html:

<div class="row content-wrap">
  <sidebar></sidebar>
  <main class="main-content">
    <router-outlet></router-outlet>
  </main>
</div>

从模板导航运行良好(我们打开/qa/documents),但是当尝试以编程方式导航时,我们会遇到错误。

只是为了测试尝试在 Milestone.Component.ts 的 ngOnInit() 挂钩方法中导航:

export class MilestoneComponent implements OnInit {

  constructor( private router: Router) {}

  ngOnInit() {
    this.router.navigate(['/home/documents']);
  }

有错误:core.es5.js:1020 ERROR 错误:未捕获(承诺中):错误:无法匹配任何路由。 URL 段:“主页/文档”

可能是什么问题?


您应该尝试使用数组中的单独参数进行导航:

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

以编程方式进行角度导航(router.navigate)。错误:无法匹配任何路由 的相关文章

  • Angular4 Material md-table 列宽度像普通表一样自动调整大小

    我在 Angular 4 应用程序中使用 md table 因为我将 Material 用于 UI 格式的其他部分 当我使用基本上没有 CSS 的常规表格时 列会自动设置格式以适合最宽的 td 元素 使用 md table 除了太宽的单元格
  • Angular2 - Keyup 需要澄清

    在我的应用程序中 我有条件地添加一个类 当用户输入某些内容时 我正在检查该值 并相应地添加类名称 效果很好 但它只更新一组 keyup 0 设置一些值keyup 这不像angular 1 here 所以有人解释一下为什么我们要设置 keyu
  • 所有的index.ts都是用来做什么的?

    我一直在研究一些种子项目 所有组件似乎都有一个从该组件导出 的 index ts 我在任何地方都找不到它的实际用途 E g https github com mgechev angular2 seed tree master src cli
  • angular2 使用 router.subscribe 来观察 url 变化

    我在用着router event subscribe angular router观察 url 变化以执行if虽然声明event subscribe工作正常 但我的问题是我怎样才能避免重复我的if声明只是为了在这些网址上显示标题 这可能是别
  • 在 Angular 2 中添加 polyfill 代码

    如何在 Angular 2 cli 项目中添加 polyfill 的代码 例如 我想使用以下来自的polyfillMozilla MDN https developer mozilla org en US docs Web JavaScri
  • Angular 5 - 谷歌未定义(谷歌地图)

    我想在我的 Angular 5 应用程序上使用谷歌地图 但遇到了一些问题 加载视图时 我在 js 控制台中收到错误 LoginComponent Host ngfactory js sm 1 ERROR ReferenceError goo
  • Angular2如何更改禁用按钮的颜色

    我有这个按钮
  • 方法与管道

    在 Angular 应用程序中的模板插值中使用管道和方法有区别吗 例如 h1 name toLowerCase h1 vs h1 name lowercase h1 就性能而言 是有真正的收获还是只是个人喜好 我知道调用模板中的方法通常会降
  • 如何让 Angular 2 选择动态添加的 routerLink 指令

    正如所见这个笨蛋 https plnkr co edit K906Y8KtkgYVgAIsCLqE p preview 我动态地将 HTML 添加到我的一个元素中 这可以归结为 Component selector my comp temp
  • 在 Angular 2 Typescript 应用程序中使用 moment.js

    我在 Angular 2 Typescript 应用程序中使用 moment js 库时遇到了困难 即使在阅读了答案之后这个问题 https stackoverflow com q 35166168 1031097我无法让它工作 这就是我到
  • Ionic 4:硬件后退按钮重新加载应用程序

    从事项目并陷入问题 硬件后退按钮重新加载应用程序 我在此应用程序中使用 Angular Router 我退出应用程序的代码 ionViewDidEnter this subscription this platform backButton
  • 鼠标悬停时不会打开单独组件中的材质子菜单

    我注意到 Angular Material 中的这种行为 如果我在单独的组件中移动子菜单 则它不会在鼠标悬停时打开 就像它是在与其父菜单相同的组件中定义的那样 例如 此菜单在鼠标悬停时打开
  • Angular 6 - 将事件处理程序添加到动态创建的 html 元素

    我想将点击事件附加到动态创建的 html 元素 单击事件应该能够触发组件中的另一个方法 我已经浏览过其他建议使用 ElementRef 附加事件的答案 但是 它不适用于我的情况 我正在使用 mapQuest API 来渲染地图 地图将绘制地
  • 角度材质表-表内边框

    I am using Angular material table and I want to set border inside the table Using CSS I was able to set border Normal ca
  • 为 Angular 2 配置history.pushState

    我的 Angular 2 应用程序使用默认值HTML 5 history pushState https developer mozilla org en US docs Web API History API Adding and mod
  • 获取异常 jQuery 必须包含在 Bootstrap 的 JavaScript 之前

    我遇到以下异常 bootstrap js 240 Uncaught TypeError Bootstrap 的 JavaScript 需要 jQuery jQuery 必须包含在 Bootstrap 的 JavaScript 之前 在 Ob
  • Angular 4 Http POST 不起作用

    我希望每个人都做得很好 我最近开始使用 Angular 4 4 我一直在尝试将数据发布到我的 api 服务器 但不幸的是它不起作用 我花了大约两天的时间 但仍然没有成功 甚至已经尝试过 6 7 篇文章角 io https angular i
  • 使用 rxjs 将数据添加到 http 响应

    我有一个包含司机 ID 的旅行实体 我可以使用 RESTFull 端点获取获取行程 例如 trips 2 example response id 2 driver id 123 我可以使用端点获取驱动程序详细信息 例如 drivers 12
  • Angular 2发送数组另一页

    我正在使用 Angular 开发天气应用程序 我是 Angular 的新手 我想带上我选择的城市的天气信息 但我无法将数据发送到第二页 哪里有问题 预先感谢您的帮助 export class ForecastComponent implem
  • Angular2 如何对自定义验证器指令进行单元测试?

    我为输入字段编写了一个非常简单的自定义验证器 import Directive from angular core import AbstractControl NG VALIDATORS from angular forms functi

随机推荐

  • UITableView,使页脚停留在屏幕底部? [复制]

    这个问题在这里已经有答案了 我有一个带有页脚的 UITableView 在自定义视图中填充了 tabBar 使用以下代码完成 CGFloat tableView UITableView tableView heightForFooterIn
  • Elasticsearch 提高查询性能

    我正在努力提高查询性能 对于甚至不触及嵌套文档的简单查询 平均需要大约 3 秒 有时甚至更长 curl http searchbox 9200 global user search n 0 sort influence asc q user
  • 如何在 CSS3 下拉菜单中使用(顶部)边距?

    我正在尝试完全用 CSS3 创建一个下拉菜单 在很大程度上我已经完成了我想要的 但由于某种原因我似乎无法添加margin top 10px 下拉菜单 因为我不希望它接触主链接 当悬停到达边缘时似乎会停用它 我在 jsFiddle 上发布了一
  • 如何从 SQL Server 的一行中选择一个值?

    所以我有一张桌子 place id name description availableDirections 1 Room A nice room N W E S 2 Office A messy office N W E S 如何仅获取其
  • Ruby on Rails:errors.add_to_base 与 error.add

    我读过 errors add to base 应该用于与对象相关的错误 而不是特定的属性 我很难概念化这意味着什么 有人可以举个例子说明我什么时候想使用它们吗 例如 我有一个乐队模型 每个乐队都有一个流派 当我验证某个类型是否存在时 如果缺
  • DIV :after - 在 DIV 之后添加内容

    我正在设计一个简单的网站 我有一个问题 我毕竟想要 div 标签有class A 在底部有一个图像分隔符 就在 div 参见图像 红色部分 我正在使用 CSS 运算符 after创建内容 A after content display bl
  • 解析 request.object.get("KEY") 总是返回 undefined

    我这里有一个奇怪的问题 我有一个使用 Parse com 作为后端构建的项目 在建立与数据库的连接时使用 cloudcode 来验证一些事情 一切都按其应有的方式进行 但问题来了 另一位开发人员向我报告说出现了问题 因为每次他尝试调用时都会
  • 使用正则表达式量词 python 时出现关键错误

    我正在尝试捕获 pandas df 中指定股票后面的单词 我有几只以下格式的股票 IBM我正在设置一个 python 正则表达式模式来搜索每条推文中股票后面的 3 5 个单词 如果找到 我的 df 打来电话stock news看起来像这样
  • 是否可以从 .NET 调用 OCaml?

    是否可以将 OCaml 与 NET 代码一起使用 我想像 C 一样调用它 或者也许有一座桥梁 你有没有考虑过CSML http www lexifi com csml 您需要用其接口描述语言编写一些内容 然后应该能够从 NET 调用 OCa
  • 无法在 Jetson TK1 上使用 opencv VideoCapture 打开 gstreamer 管道

    我编写了一个程序 从 gstreamer 管道读取帧 使用 opencv 库处理它们 然后写回 gstreamer 管道 代码片段 cv VideoCapture cap v4l2src video x raw framerate 30 1
  • 正则表达式单词宏找到彼此在一定范围内的两个单词,然后将这些单词斜体化?

    所以 我刚刚开始了解正则表达式 我发现学习曲线相当陡峭 然而 stackoverflow 在我的实验过程中提供了极大的帮助 我想编写一个特定的单词宏 但我还没有找到实现它的方法 我希望能够在文档中找到两个相距不超过 10 个单词的单词 然后
  • 递归重命名文件扩展名

    我很难创建一个 python 脚本来重命名文件夹中的文件扩展名并继续在子目录中执行此操作 这是我迄今为止的脚本 它只能重命名顶级目录中的文件 usr bin python Usage python rename file extension
  • NamespaceContext 以及通过 XPath 使用命名空间

    在 Java 中解析包含名称空间的 xpath 似乎需要使用NamespaceContext对象 将前缀映射到命名空间 url 反之亦然 但是 我找不到任何机制来获取NamespaceContext除了我自己实现之外 这似乎违反直觉 问题
  • xtfrm.data.frame(x) 中的警告:无法 xtfrm 数据帧:在 R 中以数字方式排序数据帧时出错

    我几周前开始学习 R 所以我对 R 编码仍然非常陌生 我试图以数字方式订购数据帧 但在订购的数据帧之上 由于执行函数 order nameofthedataframe 出现 xtfrm data frame x 中的警告 无法 xtfrm
  • 更改 api 上的状态/通知栏颜色低于 21 android?

    我在某些应用程序中看到状态栏颜色可以更改并匹配 api 级别 21 中所做的操作 我搜索并找到了这个解决方案Source https stackoverflow com questions 27093287 how to change st
  • C 编程。 FizzBu​​zz 程序 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我有一个测验 我写了这段代码 如果能被 3 整除则打印 Fizz 如果能被 3 整除则打印 Buzz 可被 5 整除 如果是 则打印 Fi
  • GCC 可以忽略函数的静态声明吗?

    在我的应用程序中 我有一个用于伪单元测试的构建配置 这更像是一种手动调试专用功能 在这些单元测试中 我想访问声明为的函数static在他们的翻译单位 GCC 是否有一个选项可以让我打电话static任何地方的功能 我想避免 if UNIT
  • 当 DOM 元素的计算样式发生变化时触发事件?

    有没有非轮询监听元素变化的方法计算风格 https developer mozilla org en US docs DOM window getComputedStyle 这个幻想代码片段应该简洁地解释我的意思 var el docume
  • 在 Google App Engine 上使用异步 urlfetch 启动后端

    我正在尝试 GAE 的几个功能 我已经建立了一个Dynamic后端 但我在让这个东西工作时遇到了几个问题没有任务队列 后端代码 class StartHandler webapp2 RequestHandler def get self d
  • 以编程方式进行角度导航(router.navigate)。错误:无法匹配任何路由

    尝试以编程方式在组件内部导航到另一个路由路径 但出现错误 错误错误 未捕获 承诺 错误 无法匹配任何路由 网址段 有应用程序的下一个结构 app module ts main module ts milestone ts const mai