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

Question

I want to load aux route on the / URL but it does not work. For example, I want to load in my homepage the 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>

So now I am trying to access this URL and expecting to get the HomeComponent in the primary outlet and the LoginComponent in the auth outlet:

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

But it only loads the LoginComponent and not the HomeComponent.

Answer 1

You need to define redirect route:

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>

Or:

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