1

Minha aplicação começa no AppComponent, no AppComponent eu defini o <router-outlet> </router-outlet>

Defini as seguintes rotas:

const appRoutes: Routes = [
  { path: '', component: LoginComponent }
];


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

Meu login component tem um wrapper com bordas e tudo mais, e eu gostaria de que quando clicasse no botão "registrar", o conteúdo que está dentro do wrapper trocar para o conteúdo da rota 'registrar'.

Para isso eu preciso colocar o router-outlet dentro do wrapper? Talvez colocar o wrapper no app component??

Estou confuso quanto as rotas.

2
  • A tag <router-outlet> é apenas uma marcação para onde os elementos devem aparecer no browser. Todo componente irá aparecer logo abaixo dessa tag. Acredito que você deverá fazer um segundo outlet dentro do wrapper e anexar as trocas de rotas a esse segundo.
    – mutlei
    Commented 13/07/2018 às 17:06
  • Inclusive eu tenho um problema bastante similar ao seu. Vou implementar aqui e depois retorno.
    – mutlei
    Commented 13/07/2018 às 17:33

1 Resposta 1

1

Após quebrar um pouco a minha cabeça (e pesquisar um pouco), consegui fazer algo similar ao que você quer.

Minha aplicação tem uma barra de navegação que eu quero deixar ela no topo o tempo todo, mas que ela deveria desaparecer na tela de login.

Meu app html template era mais ou menos assim:

<app-nav-bar></app-nav-bar>
<router-outlet></router-outlet>

Isso fazia com que a barra aparecesse depois da tela de login, mas caso eu voltasse para a "tela inicial" por algum link, a barra continuava na página. Então eu mudei para isso aqui:

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

Com a adição de uma rota:

{path: 'home', component: NavBarComponent, outlet: 'navbar'}

Agora, quando se trata de mudar rotas, você pode usar dois modos:

No routerLink (dentro do HTML), usar a seguinte forma:

[routerLink]="[{outlets: {primary: ['caminho'], navbar: ['caminho']}}]"

E nos componentes (TypeScript), da seguinte forma:

router.navigate([{outlets: {primary: 'caminho', navbar: 'caminho'}}]);

Agora, partindo da descrição do seu problema, o router-outlet primário deve ficar FORA do wrapper (dentro do app.component.html) e o router-outlet auxiliar dentro do wrapper. Você vai fazer as alterações de rota usando o auxiliar.

Nota:

A barra de endereços vai ficar diferente, algo como

    localhost:4200/home(navbar:home)

Onde localhost:4200/home é a rota do outlet primário e navbar:home é a rota dos outlets auxiliares

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 .