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，并在auth插座中获取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)

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

1 个答案: