Angular。 Route relative to object id: 组件显示两个URL怎么办？

Question

我的问题是以下一个。这是我的路线：

const routes: Routes = [
  { path: 'tasks', component : TodoListComponent},
  { path: 'tasks/:id', component : SingleTaskComponent},
  { path: '', component : TodoListComponent},
];

当我从 url/tasks 导航到 url/tasks/id 时，一切正常。但是当我从 url/ 执行它时，它不起作用（显然）因为它重定向到 url/id 因为 TodoListComponent 模板中有这个按钮：

<a [routerLink]="id">Edit</a>

你知道我该怎么做吗？

谢谢

Answer 1

const routes: Routes = [
  {path:'', redirectTo: 'task', pathMatch:'full'}
  { path: 'tasks', component : TodoListComponent},
  { path: 'tasks/:id', component : SingleTaskComponent},
  { path: '', component : TodoListComponent},
];

component.ts
goList(){
this.router.navigate(['/tasks'])
}

component.html
<a routerLink="tasks" class="nav-link" routerLinkActive="active">edit</a>
// active is Boolean value - declare in .ts file

Answer 2

使用重定向选项：

const routes: Routes = [
  {path:'', redirectTo: 'tasks', pathMatch:'full'}
  { path: 'tasks', component : TodoListComponent},
  { path: 'tasks/:id', component : SingleTaskComponent},
];

Angular。 Route relative to object id: 组件显示两个URL怎么办？

Angular. Route relative to object id: how to do it if the component is showed with two URL?

routes

angular-routing

angular