angular2路由将不起作用例外：未捕获（承诺）：

Question

angular2为什么？

 { path: 'dashboard',      component: DashboardComponent,canActivate: [AuthFirebaseGuard] },
 { path: 'apikey',      component: ApiKeyComponent, canActivate: [AuthFirebaseGuard],outlet:'content'}

在我的导航中：

<li><a [routerLink]="['apikey']">Api Key</a></li>


EXCEPTION: Uncaught (in promise): Error: Cannot match any routes: 'dashboard/apikey'

我尝试过：

{ path: 'dashboard/apikey',      component: ApiKeyComponent, canActivate: [AuthFirebaseGuard],outlet:'content'}




 <div class="container"> 
        <router-outlet></router-outlet>
        <router-outlet name="content"></router-outlet>
  </div>

我的导航在：

我要定位：

<router-outlet name="content"></router-outlet>

PS它可以工作，如果我执行以下操作：

  <li ><a (click)="onClick()">Api Key</a></li>

  onClick(){
  this.router.navigateByUrl('/dashboard(content:apikey)' );
  }

网址如下所示：

 http://localhost:4200/#/dashboard(content:apikey)

如何格式化路由器链接？

 [routerLink]="['/apikey']" e.g. <li ><a routerLink="['dashboard:(content:apikey)']">Api Key</a></li>

Answer 1

我认为“ apiKey”不是“ dashboard”的子代，因此路由仅是/apiKey而不是/dashboard/apikey

导航网址应包括出口。 即....routerLink=['./dashboard:apiKey']

Answer 2

不确定我是否正确理解您的问题^^

但是，如果要在同一网址上显示两个组件，则可以这样：

export const routes: Routes = [
  {path: '', component: HomeComponent},
  {path: '', component: ApiComponent, outlet: 'content'}
];

HTML：

<div class="container"> 
  <router-outlet></router-outlet>
  <router-outlet name="content"></router-outlet>
</div>

在您的情况下，您可以这样定义：

export const routes: Routes = [
  {pathMatch: 'dashboard/*', component: DashboardComponent},
  {path: 'dashboard/apikey', component: ApiComponent, outlet: 'content'},
  {path: 'dashboard/other', component: OtherComponent, outlet: 'content'}
];

<li><a [routerLink]="['dashboard/apikey']">Api Key</a></li>