0

Hola soy nuevo en Angular y estoy haciendo una web pero tengo un detalle que no puedo resolver, en el app component tengo un simple texto "Texto de ejemplo" y también un componente navbar , lo que quiero es que cuando yo de click en otra sección del navbar desaparezca ese texto y solo muestre el componente que corresponde, hasta ahora al hacer click carga el componente que le corresponde pero el txt del app.component no desaparece y se muestra junto con el contenido de los otros. De antemano gracias.

App.component.html

<app-barra-nav-sup></app-barra-nav-sup>
<router-outlet></router-outlet>
<div>
    <p>Texto de muestra</p>
    
</div>
app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
}

navbar.component

<nav class="navbar sticky-top navbar-expand-md navbar-light" style="background-color: #00cc00;">
  <!-- <div class="mx-auto d-sm-flex d-block flex-sm-nowrap"> -->
  <a class="nav-link" href="#">
    <h5>Inicio</h5>
  </a>
  <button class="navbar-toggler mr-left custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="nav navbar-nav navbar-primary w-100 ml-auto">
      <li class="nav-item active">
        <a class="nav-link" aria-current="page" routerLink='productos'>Productos</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink='proveedores'>Proveedores</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink='distribuidores'>Distribuidores</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink='contacto'>Contacto</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink='acercade'>Acerca De</a>
      </li>
    </ul>

  </div>
</nav>

2
  • Hola Miguel, estoy desde el teléfono, pero para eso que quieres debes hacer uso del router-outlet, es lo que usa angular para cargar de forma dinámica los componentes, con esto, en pocas palabras, quitas un componente y colocas el otro en base a las rutas que le hayas definido. Puedes entrar a la documentación y buscar router-outlet, hay ejemplos sencillos que te puedan ayudar.
    – JulianProg
    Commented el 25 mar. 2021 a las 18:08
  • Tal vez este enlace te puede ayudar: desarrolloweb.com/articulos/…
    – JulianProg
    Commented el 25 mar. 2021 a las 18:10

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.