CODEWITHSUNDEEP
htmlangular
senjust
senjust

Reputation: 119

Why in my Angular-project does not replace home-page when I go to another route, and just adds the bottom of the page?

Here is the markup of my home page. I wrote several routes, and I need to display the content of the corresponding component instead of the home page when switching to them. And I have it added from the bottom of the home, and the home content continues to be displayed.

<div class="container">
  <div class="row">
      <app-header></app-header>
  </div>
  <div class="row">
    <app-home></app-home>
    <router-outlet></router-outlet>
</div>
  <div class="row">
      <app-footer></app-footer>
  </div>
</div>

This is my app-home:

<app-home-news [homeImages]="homeImages"></app-home-news>

<router-outlet></router-outlet>

This is my routes:

const routes: Routes = [
  { path: 'sign-up', component: SignUpComponent },
  { path: 'sign-in', component: SignInComponent }
];

There is no error, the content simply adds to the home. How to make it appear in his place?

Upvotes: 0

Views: 449

Answers (2)

Krenom
Krenom

Reputation: 2118

You need to be careful about your routes and what router outlets your urls are going to populate. It's not just a case of putting a router-outlet at the bottom of each of your components to display something new...

Assuming I had a very basic AppComponent template:

<h1>Hello</h1>
<router-outlet></router-outlet>

... and some configured routes:

{ path: '', component: HomeComponent }
{ path: 'test', component: TestComponent },
{ path: 'hello', component: HelloComponent}

... which just contained their own names in a p tag (home, test, and hello respectively).

The following would be true for each url: example.com

Hello

Home

example.com/test

Hello

Test

example.com/hello

Hello

Hello

The route has loaded the component into the router-outlet.

If my components then had router outlets of their own, we're in to child route territory, wherein you start to use urls such as example.com/test/abc, with your routes looking more like:

{
  path: 'test', 
  component: TestComponent,
  children: [
    { path: 'abc', component: AbcComponent },
    { path: 'def', component: DefComponent }
  ]
}

Which would result - assuming the same content rules as above would look like:

example.com/test/abc:

Hello

Test

Abc

example.com/test/def:

Hello

Test

Def

Typically, your AppComponent handles your site-wide header/footer/nav/etc. with a single router-outlet that every other component will be loaded into, which includes your home page itself...

{ path: '', component: HomeComponent }
{ path: 'sign-up', component: SignupComponent }
{ path: 'sign-in', component: SigninComponent }

There may well be further router-outlets in the components (as above), but it seems that what you currently WANT, most likely, is this case rather than the more complex type with nested outlets above that you currently HAVE.

Upvotes: 0

Sunil
Sunil

Reputation: 11243

See anything which is outside <router-outlet></router-outlet> will always be there. Like in your case header and footer only should be in main html not home component. Anything you to change on the basis of routing, you should be part of routing configuration.

Make the following changes 

 <div class="container">
      <div class="row">
          <app-header></app-header>
      </div>
      <div class="row">
        <!-- removed the home component -->
        <router-outlet></router-outlet>
    </div>
      <div class="row">
          <app-footer></app-footer>
      </div>
    </div>

Add the home component as the part of the routing.

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'sign-up', component: SignUpComponent },
  { path: 'sign-in', component: SignInComponent }
];

Note : I add the component at the root level so I left the path blank but you can as per your path like 

{ path: 'home', component: HomeComponent },

Upvotes: 2

Related Questions