Child component of other component does not load

Asked

Viewed 600 times

0

I configured the routes, but the component does not render when the application is initialized. I need the component posts render inside the component blog, and the blog already loads correctly.

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 demonstrating where to load the component posts: print demonstrando aonde deveria carregar a view

angular angular-routes

  • blog/posts also does not work?

  • @Eduardovargas the blog component loads as home page of the app... It loads normally but does not bring together the child component posts. The idea is that everything comes together when the app is loaded.

  • I think I know what the problem is. Try /blog/blog/posts

1 answer

0


Try the following settings:

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

Don’t forget to import the blog module before the Approutingmodule in the app.module.ts

Browser other questions tagged angular angular-routes

You are not signed in. Login or sign up in order to post.