Router Angular 7 appears the page I want but does not take the previous page and is both at the same time

I set up my files all correctly I think, but when I click on the button

This is the router configuration page I put the signup in the array

App-route.modulate.ts 

   import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SignupComponent } from './signup/signup.component';


const routes: Routes = [
  {path: 'signup', component: SignupComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

This is the navbar I used to call the signup Route

Nav.component.html 

<div class="wrapper header" id="home">
  <nav>
    <div class="menu-icon">
      <i class="fa fa-bars fa-2x"></i>
    </div>
    <div class="logo">
      <a class="scroll" href="#home">SHOP</a>
    </div>
    <div class="menu">
      <ul>
        <li><a class="scroll" href="#guitars">Guitars</a></li>
        <li><a class="scroll" href="#contact">About</a></li>
        <li><a class="scroll" routerLink="/signup" routerLinkActive="active">SignUp</a></li>
      </ul>
    </div>
  </nav>

  <h3 class="h3style">A guitarra do seus sonhos <br> está aqui</h3>

</div>

And this is my page that I use to call the selectors 

<app-nav></app-nav>
<app-products></app-products>
<app-subscribe></app-subscribe>
<app-contact></app-contact>
<app-footer></app-footer>

<router-outlet></router-outlet>

Only thing that happens when I click signup in navbar is adding the page I Want below the page I want it to leave when I click on signup does anyone know what I have to do ?

Author: Gabriel Guedes, 2019-02-04
Source

1 answers

As Victor Henrique said, the only page you put up to be triggered by a route is the signup page. All other components are fixed on the main page.

To fix this, you have to create routes to the other pages you want when you click on a link. For example, you could do the following:

Create a HomeComponent, NavComponent (containing only the

Example of AppComponent: 

<app-nav></app-nav>
<router-outlet></router-outlet>
<footer>
  <!-- Se o footer possuir muito conteúdo, você pode criar um component pra ele e substituir esse elemento pelo seletor do componente -->
</footer>

The HomeComponent should have the HTML that will be loaded as soon as the user accesses your site without a specific route (type 'www.seusite.com.br/').

This way, you have elements that will always be visible on the page, which is the nav and footer. Angular will insert a different component after the <router-outlet> element depending on which route you are on. There you will have to configure the route like this: 

const routes: Routes = [
  { path: '', pathMatch: 'full', component: HomeComponent }, // Caso a rota seja 'www.seusite.com.br/'
  { path: 'About', component: AboutComponent }, // Caso a rota seja 'www.seusite.com.br/About'
  { path: 'Shop', component: ShopComponent }, // Caso a rota seja 'www.seusite.com.br/Shop'
  { path: 'Guitars', component: GuitarsComponent }, // Caso a rota seja 'www.seusite.com.br/Guitars'
  { path: 'Signup', component: SignupComponent } // Caso a rota seja 'www.seusite.com.br/signup'
];

If you are on the Guitars page and click Signup, the content of the Guitars component will be exchanged for the content of the Signup page.

This is just one example. The reality of your site can be quite different.

 4
Author: Julio Hintze, 2019-02-04 15:18:14