angular2ルーティングは機能しません例外：未知（約束）：

Question

angular2なぜですか？私のNAVで

{ 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' 

Iイベントは、試してみました：

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




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

私のNAVはである：

私がターゲットにしたい：

私は次の操作を行う場合

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

PSはそれが動作します：

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

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

これは、URLは次のようになります。私は、ルータのリンクをフォーマットするにはどうすればよい

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

ナビゲーションURLが口を含めるべきであるように、「APIKEY」が「ダッシュボード」の子ではないと思います。私。私が正しくあなたの質問^^

を理解....routerLink=['./dashboard:apiKey']

Answer 2

わからないしかし、あなたが同じURL上の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>