【问题标题】:Angular Routing Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'dashboard/profile'角度路由错误:未捕获(承诺):错误:无法匹配任何路由。 URL 段:“仪表板/个人资料”
【发布时间】:2018-09-10 20:03:16
【问题描述】:

自从我开始在我的 Angular 项目中处理延迟加载模块以来,我突然收到 错误:无法匹配任何路线。

所以现在我有两个模块

  • 索引模块
  • TeacherDashboard 模块

在 TeacherDashboardModule 中,我有以下组件:

  • 仪表板
  • 个人资料
  • 顶部导航

仪表板和个人资料是 2 个单独的页面,top-nav 位于它们上方。

TopNavComponent 有一个下拉菜单,如下图所示

<ul class="navbar-nav ml-auto mt-2 mt-lg-0 navbar-right">
    <li class="nav-item dropdown">
      <a class="nav-link" class="dropdown-toggle" data-toggle="dropdown">
        <img src="{{user.photoUrl}}" />
        <strong>{{user.firstName}}</strong>
        <span class="glyphicon glyphicon-chevron-down"></span>
      </a>
      <ul class="dropdown-menu">
        <li> <a routerLink = "profile">Profile</a> </li>
        <li> <a routerLink="settings">Settings</a> </li>
        <li> <a routerLink="dashboard"> Dashboard </a> </li>
        <li> <a routerLink = "blog">Blog</a> </li>            
        <li> <a href="javascript:void(0)">Privacy Policy</a> </li>
        <li> <a href = "javascript:void(0)" (click) = "logout()">Logout</a> </li>
      </ul>
    </li>
  </ul>

所以当我点击一个链接例如 profile 时,我得到这个错误:

ERROR 错误:未捕获(在承诺中):错误:无法匹配任何路由。 URL 段:“仪表板/个人资料” 错误:无法匹配任何路由。 URL 段:“仪表板/个人资料”

问题是我打算将仪表板和个人资料页面分开,所以当我点击 dashboard 时,它应该转到 localhost:4200/dashboard 并且当我点击 profile它应该去 localhost:4200/profile

这是我在 teacher-dashboard-routing.module.ts 中的路线:

const routes: Routes = [


  {
    path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full'
  },
  {
    path: 'profile',
    component: ProfileComponent
  },
  {
    path: 'dashboard',
    component: DashboardComponent
  }



];

我了解正在发生的事情,但我不确定如何解决此问题。我可以让它采用绝对路径而不是相对路径吗?

【问题讨论】:

    标签: angular angular-routing


    【解决方案1】:

    您可以使用相对路径,例如:&lt;li&gt; &lt;a routerLink = "../profile"&gt;Profile&lt;/a&gt; &lt;/li&gt;

    【讨论】:

    • 谢谢。我想知道我如何不必在我的另一个模块中执行此操作,即 IndexModule ,我只需要去 /login 和 /signup 。在导航栏中,我只需重定向到 /login 和 /signup ,这种方法甚至适用于登录和注册页面。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-09-21
    • 1970-01-01
    • 2019-10-14
    • 2019-07-30
    • 1970-01-01
    • 2016-11-11
    相关资源
    最近更新 更多