0

Minha aplicação começa no componente LoginComponente:

bootstrap: [LoginComponent]

No meu login routing module eu defini as seguintes rotas:

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

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

A Dash deve ser acessada quando o usuário faz o login;

No meu login.component.html eu defini um ngIf que só vai aparecer a dash quando o usuário loga no sistema:

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

Neste template eu defini o router-outlet e botões para as chamadas das navegações:

<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>

Tudo funciona perfeitamente por enquanto. Quando a aplicação está no localhost:4200 ela redireciona para a página de login. Quando clica em registrar ela altera para o componente de registro e quando clico em entrar ele me move para a tela de dash.

O problema é que a dash é um componente fixo que dentro dela vai ter outros componentes, então eu tentei colocar outro router-outlet dentro da dash:

   <router-outlet></router-outlet>

dashboard.routing.module.ts:

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

Porém, o BemVindoComponent não aparece dentro da minha dash. Ele já está como exports e é importado pelo meu módulo de rotas da dash.

1 Resposta 1

1

Você tem de colocar um nome ao segundo router-outlet

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

Ao definir nas rotas, especificar o outlet desejado

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

E para fazer as alterações de rota, tem duas formas:

  1. No HTML, através do routerLink

    <a [routerLink]="[{outlets: {primary: ['caminho/da/view/primaria'], nomeASerDado: ['caminho/da/view/auxiliar']}}]"></a>
    
  2. Através de um comando ao router

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

Mas você só precisa usar essa forma de alteração de rota se precisar usar o outlet nomeado, caso contrário, pode usar assim:

routerLink="caminho/a/ser/seguido"

ou assim

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

Você pode tirar mais alguma ajuda deste link.

8
  • Alterei para: {path: 'dash', component: DashboardComponent, outlet:'primario'}, {path: 'registrar', component: RegistrarComponent, outlet:'primario'} e <button type="submit" routerLink="[{outlets: {primario: ['dash']" name="entrar" (click)="fazerLogin()" class="btn btn-success waves-effect" id="login-button">Entrar</button> <button type="button" routerLink="[{outlets: {primario: ['registrar']" class="btn btn-outline-success waves-effect">Registrar</button> Ainda não deu certo Commented 18/07/2018 às 16:37
  • Você tem que colocar o atributo name no router-outlet e registrar a rota no módulo de roteamento
    – mutlei
    Commented 18/07/2018 às 16:38
  • coloquei também... <router-outlet name="primario"></router-outlet> Commented 18/07/2018 às 16:40
  • O routerLink no botão não está entre colchetes. Deveria ficar [routerLink]=
    – mutlei
    Commented 18/07/2018 às 16:41
  • usando com colchetes a página nem carrega... e sem colchetes não funciona Commented 18/07/2018 às 16:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .