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>