如何解决角路由混乱/奇怪的行为
我有一条带有三条兄弟路线的基本路线。父路由路由到我的task-list.component.ts,其中包含一个导航栏和路由器出口。
我想在基本路线上有一个路线参数,可以在其中添加可选标记
所以当我导航到http:// localhost:4200时,令牌应该是未定义的。
当我导航到http:// localhost:4200/123时,激活的路由参数中的令牌应为123
我具有以下路由配置,但遇到混乱/奇怪的行为。
当我导航到http:// localhost:4200时,按预期方式进入基本taskList.component。
当我尝试浏览至http:// localhost:4200/123时,找不到404吗?预期的行为是,它应该已经导航到taskList.component并在激活的路由参数中添加了123 ...
当我单击导航栏中的已删除链接时,更奇怪的是,它再次导航到父组件app.component,然后我才被“删除”作为激活的路由参数中的值...
更奇怪的是:当我使用浏览器导航到http:// localhost:4200时,它没有设置为令牌删除,而是再次找不到404 ...
有什么想法可以解决上述问题吗?
我的路线模块代码:
import { NgModule } from '@angular/core';
import { Routes,RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { TaskListComponent } from './task/task-list/task-list.component';
import { CompletedTasksComponent } from './task/completed-tasks/completed-tasks.component';
import { DeletedTasksComponent } from './task/deleted-tasks/deleted-tasks.component';
const routes: Routes = [
{ path: '',component: TaskListComponent,pathMatch: 'full' },{ path: 'completed',component: CompletedTasksComponent },{ path: 'deleted',component: DeletedTasksComponent },{ path: ':token',component: TaskListComponent },{ path: ':token/completed',{ path: ':token/deleted',component: DeletedTasksComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.html:
<nav mat-tab-nav-bar>
<a mat-tab-link
*ngFor="let link of links"
[routerLink]="navigate(link)"
(click)="activeLink = link"
[active]="activeLink == link">{{link}}</a>
</nav>
<router-outlet></router-outlet>
app.component.ts导航方法
navigate(link) {
switch(link) {
case 'Task List':
return `${this.token}`;
case 'Completed Tasks':
return `${this.token}/completed`;
case 'Deleted Tasks':
return `${this.token}/deleted`;
}
}
解决方法
旧答案:您的路线存在一些问题。您可以像这样修复它:
RouterModule.forRoot([
{ path: "",component: TaskListComponent,pathMatch: "full" },{ path: "deleted",component: DeletedTasksComponent },{ path: ":id",component: TaskListComponent },{ path: ":id/completed",component: CompletedTasksComponent },{ path: ":id/deleted",component: DeletedTasksComponent }
])
更新: 根据您的编辑和注释,现在可以在应用程序导航中使用,但是刷新页面时(即使在开发环境中)您也会得到404。因此请尝试:https://stackoverflow.com/a/35285068/4718434。 (同样在生产中,您还应该配置服务器以在每个路径上返回有角度的html文件。)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。