Question

我有一条带有三条兄弟路线的基本路线。父路由路由到我的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`;
    }
  }

Answer 1

旧答案：您的路线存在一些问题。您可以像这样修复它：

    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 }
    ])

Run It On Stackblitz

更新：根据您的编辑和注释，现在可以在应用程序导航中使用，但是刷新页面时（即使在开发环境中）您也会得到404。因此请尝试：https://stackoverflow.com/a/35285068/4718434。（同样在生产中，您还应该配置服务器以在每个路径上返回有角度的html文件。）

角路由混乱/奇怪的行为

1 个答案: