Solucionado
Tenho duas páginas: home e login. No aapRoutes fiz:
export const ROUTES: Routes = [
{ path: '', component: HomeComponent, children: [
{ path: 'login', component: LoginComponent },
] }
];E no html do home coloquei:
<router-outlet></router-outlet>Mas o que ocorre é que a página de login aparece embaixo da página home, quando clico no botão de login. Queria que mudasse de página, que só aparecesse a pagina de login.
O que faço?
Fala aí Caio, tudo bem? Nesse cenário o ideal que as suas rotas sejam irmãs e não filhas.
Mas, talvez se você adicionar um pathMatch: 'full' na rota da home ela não seja renderizada quanto estiver no login.
Geralmente usamos rotas filhas quando precisamos definir um path relativo, exemplo:
/profile
/profile/1
/profile/1/contactMas, olhando seu problema, talvez o pathMatch deva resolver.
Espero ter ajudado.
Eu acho que tem que ser filhas sim, pois tem que ficar do jeito que vc exemplificou. Sendo irmãs funciona, mas não serve. Colocando o patchMatch: 'ful' no home, a pagina de login não renderiza mais.
Resolvi assim:
export const ROUTES: Routes = [
{
path: '',
component: AppComponent,
children: [
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'home',
loadChildren: './home/home.module#HomeModule',
} ,
]
}
];export const ROUTES: Routes = [
{
path: '',
children: [
{
path: '',
component: HomeComponent,
},
{
path: 'login',
loadChildren: '../login/login.module#LoginModule',
} ,
]
}
];
export const ROUTES: Routes = [
{
path: '',
component: LoginComponent,
}
];Boa Caio, fico feliz que tenha resolvido o problema.
Utilizar o loadChildren através de módulo ia ser a segunda opção que eu ia te falar.
Queria validar se apenas com patchMatch iria ser o suficiente ou não (não tive tempo de testar aqui).
Sempre que precisar não deixe de criar suas dúvidas.
Abraços e bons estudos.