0

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: print demonstrando aonde deveria carregar a view

3
  • blog/posts também não funciona? 10/05/2018 às 7:47
  • @EduardoVargas o componente blog carrega como página inicial do aplicativo... Ele carrega normalmente, mas não trás junto o componente filho posts. A ideia é que tudo venha junto na hora que o app seja carregado. 10/05/2018 às 14:46
  • Acho que sei o que e o problema. Tenta /blog/blog/posts 10/05/2018 às 14:48

1 Resposta 1

0

Tenta com a seguinte configuração:

app.routing.module.ts:

const appRoutes: Routes = [
    { path: '',   redirectTo: '/blog', pathMatch: 'full' }
    { path: 'candidatos', component: CandidatosComponent},
    { path: 'sobre', component: AboutComponent},
];   

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 }
        ]
      }
    ];

Nao esqueca de no app.module.ts importar o modulo blog antes do AppRoutingModule

1

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 .