【发布时间】: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
}
];
我了解正在发生的事情,但我不确定如何解决此问题。我可以让它采用绝对路径而不是相对路径吗?
【问题讨论】: