Routes at Angular 2+

Question

My application starts with the Logincomponent component:

bootstrap: [LoginComponent]

In my login routing module I set the following routes:

const loginRoutes: Routes = [
  {path: 'dash', component: DashboardComponent},
  {path: 'registrar', component: RegistrarComponent},
];

@NgModule({
  imports:[RouterModule.forRoot(loginRoutes)],
  exports: [RouterModule]
})

Dash must be accessed when the user logs in;

In my login.component.html I set an ngIf that will only appear to Dash when the user logs into the system:

<div *ngIf="!usuarioautenticou" class="wrapper">

In this template I set the router-outlet and buttons for browser calls:

<div>
     <button type="submit" routerLink="/dash" name="entrar" (click)="fazerLogin()" class="btn btn-success waves-effect" id="login-button">Entrar</button>
     <button type="button" routerLink="/registrar" class="btn btn-outline-success waves-effect">Registrar</button>
</div>
<router-outlet></router-outlet>

Everything works perfectly for now. When the application is on localhost:4200 it redirects to the login page. When I click register it changes to the registry component and when I click enter it moves me to the Dash screen.

The problem is that Dash is a fixed component that inside it will have other components, so I tried to put another router-outlet inside Dash:

   <router-outlet></router-outlet>

Dashboard.routing.module.ts:

const dashboardRoutes: Routes = [
  { path: '', component: BemvindoComponent },
];

However, the Bemvindocomponent does not appear inside my Dash. It is already as Exports and imported by my Dash route module.

Answer 1

You have to put a name to the second router-outlet

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

When defining on routes, specify the desired outlet

{path: 'caminho/a/ser/seguido', component: ComponenteQueSeraCarregado, outlet: 'nomeASerDado'}

And to make the route changes, it has two forms:

1. In HTML, via routerLink

   <a [routerLink]="[{outlets: {primary: ['caminho/da/view/primaria'], nomeASerDado: ['caminho/da/view/auxiliar']}}]"></a>
   

2. Via a command to the router

   router.navigate([{outlets: {primary: 'caminho/da/view/primaria', nomeASerDado: 'caminho/da/view/auxiliar'}}]);
   

But you only need to use this route change form if you need to use the named outlet, otherwise you can use it like this:

routerLink="caminho/a/ser/seguido"

or so

router.navigate(['caminho/a/ser/seguido'])

You can get some more help of this link.