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'不是'仪表板'的子项，所以路线只有/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>

angular2路由不起作用EXCEPTION：Uncaught（在promise中）：

2 个答案: