如何 return 使用 Angular 中的参数进行路由 7

Question

我在 Angular 7 中有一个简单的待办事项列表应用程序，我在其中添加了一个在 "personal" 和 "work" 之间切换的按钮。这是要切换的函数：

  toggleShowPersonal(){
    if (this.showPersonal){
      this.showPersonal = false; 
    }
    else {
      this.showPersonal = true; 
    }
    this.refreshTodos(); 
  }

列表显示后，用户可以选择编辑或添加待办事项。这将通过此命令将他们带到详细信息页面：

this.router.navigate(['todos',id]);

我正在尝试更改路由命令以添加 "showPersonal" 参数：

this.router.navigate(['todos',id, this.showPersonal]);

我更新了路由模块以反映更改：

  { path: 'todos/:id,:showPersonal', component: TodoComponent, canActivate:[RouteGuardService]},

但是，通过此更改，它不再转到详细信息页面，而是默认转到登录页面。

我做错了什么？

Answer 1

路径参数之间需要/:

path: 'todos/:id/:showPersonal'

如何 return 使用 Angular 中的参数进行路由 7

How to return route with a parameter in Angular 7

angular7

angular7-router