【发布时间】：2020-12-10 13:55:33
【问题描述】：
我有一个包含三个同级路由的基本路由。父路由路由到我的 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', component: CompletedTasksComponent },
{ 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`;
}
}
【问题讨论】：
-
所以在令牌中您的意思是来自登录/其他形式的身份验证的后端令牌？
-
@Jack M 现在我只想将任何测试值作为参数添加到根，例如localhost:4200/testToken 在路由参数中应该有值 testToken。
-
我不确定我是否理解您的问题：这里的有效路由是 localhost:4200/token 和 token/completed 和 token/deleted 那些应该显示其组件的内容。这没有发生吗？
-
@Jack M 不，我想为这些路由添加一个路由参数并解析路由中的参数，例如如果我的令牌是 123 并且路由定义是 :token/ 当我向 localhost:4200/123 发出请求时， route.params 中的令牌值必须是 123
-
好吧，如果 1234blabla 是某个地方的 id，那么您需要将 :token 替换为 /:id 我不知道这是否可行，尽管我只有在我们有 'token/:/ 时才这样做id'
标签： javascript angular types angular-routing