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

Question

我想在 / 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，在身份验证插座中获得 LoginComponent：

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

但它只加载 LoginComponent 而不是 HomeComponent。

Answer 1

你需要定义重定向路由：

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)