Configurei as rotas, porém o componente não renderiza quando o aplicativo é inicializado. Preciso que o componente posts
renderize dentro do componente blog
, sendo que o blog já carrega corretamente.
app.component.html:
<app-navbar></app-navbar>
<!-- corpo da página -->
<router-outlet></router-outlet>
app.routing.module.ts:
const appRoutes: Routes = [
{ path: '', component: BlogComponent},
{ path: 'blog', component: BlogComponent},
{ path: 'candidatos', component: CandidatosComponent},
{ path: 'sobre', component: AboutComponent},
];
blog.component.html:
<div id="conteudo" class="container-fluid">
<div class="row">
<div class="col-10">
hello, world!
<router-outlet></router-outlet>
</div>
<!-- direita -->
<div class="col-md-2">
<app-aside></app-aside>
</div>
</div>
</div>
blog.routing.module.ts:
const blogRoutes: Routes = [
{ path: 'blog', component: BlogComponent, children: [
{ path: '', component: PostsComponent },
{ path: 'posts', component: PostsComponent },
{ path: 'news', component: NewsComponent },
{ path: 'estudos', component: EstudosComponent }
]
}
];
print demonstrando aonde deveria carregar o componente posts
: