Question

我尝试使用可选参数调用路由。

我的路由器

const appRoutes: Routes = [

    { path: '', redirectTo: 'bo', pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    { path: 'bo', component: LayoutComponent, 
        children: [
            { path: '' , redirectTo: 'history', pathMatch: 'full'},
            { path: 'history', component: HistoryComponent } ,
            { path: 'history/details:id', component: DetailsComponent }

        ]   
    },    
];

我怎么称呼它

this.router.navigate(['./details', {id: myVarID}], { relativeTo: this.route });

错误：无法匹配任何路线：＆＃39; bo / history / details; id = myIdValue＆＃39;

但如果我在路由器中使用斜杠定义它并通过手动插入url来调用它，它就可以工作：

{ path: 'history/details/:id', component: DetailsComponent }

即使我添加了＆＃39 ;;＆＃39;而不是＆＃39; /＆＃39;在路由器中它不起作用。我想用router.navigate函数调用该路由！

Answer 1

好吧，所以我似乎很困惑。

我想使用查询参数访问路由但没有斜杠，因此解决方案是：

路线：

{ path: 'history/details', component: DetailsComponent }

呼叫：

this.router.navigate(['details', {id: myVarID}], { relativeTo: this.route });

/：id不在此处，因为查询参数不以斜杠开头并且是可选的。创建的路线为/ bo / history / details; id = myVarIDContents

在详细信息组件中，我可以将查询参数设置为：

export class DetailsComponent implements OnInit {

  constructor(public route: ActivatedRoute)  { }

  ngOnInit() {
    console.log(this.route.params.value);
  }

}

Answer 2

{ path: 'history/details:id', component: DetailsComponent }

将其更改为，

{ path: 'history/details/:id', component: DetailsComponent } //<----need to put router param after slash

并称之为，

this.router.navigate(['/details', {id: myVarID}]

无法匹配任何路线：使用查询参数

2 个答案: