Angular 2路由器 - 根URL上的辅助路由

时间:2016-10-08 19:04:08

标签: javascript angular typescript router

我想在/ URL上加载辅助路由但它不起作用。例如,我想在我的主页上加载LoginComponent。

const routes : Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: HomeComponent
  },
  {
    path: 'login',
    outlet: 'auth',
    component: LoginComponent
  }
];


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

所以现在我正在尝试访问此URL并期望在主要插座中获取HomeComponent,并在auth插座中获取LoginComponent:

http://localhost:4200/(auth:login)

但它只加载LoginComponent而不是HomeComponent。

1 个答案:

答案 0 :(得分:0)

您需要定义重定向路由:

const routes : Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'login',
    outlet: 'auth',
    component: LoginComponent
  }
];

<a [routerLink]="[{ outlets: { 'auth': ['login'] } }]">Sign in</a>

或者:

http://localhost/home(auth:login)