1

Es la primera vez que trabajo con nav-tabs de Bootstrap 4 y en mi componente he añadido esta sección de código la cual crea dos tabs con llamadas a otros componentes.

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Sensores</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" (click)="borrartabs()" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Predicciones</a>
    </li>

</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
            <app-clima></app-clima>

    </div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
        <app-predictions></app-predictions>
    </div>

El principal problema que tengo es recargar las tabs una vez que el usuario haga click sobre una de ella. Cuando el usuario está en la tabs de clima y cambia a las predicciones es necesario que el componente de predicciones vuelva a cargarse por completo de igual forma si cambiase a clima.

solo he visto documentación para mostrar una pestaña o ocultar otra pero no para recargarlas.

Este es el codigo que estoy probando para guardarlo en localsotrage cuando recargue la web saber donde estaba.

public probartabs() {

// dispose
  console.log('llM');
  //$('#exampleModal-sensor_grafica').modal('hide');
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    localStorage.setItem('activeTab', $(e.target).attr('href'));
});

  let activeTab = localStorage.getItem('activeTab');
  if(activeTab){
      $('.nav-tabs a[href="' + activeTab + '"]').tab('show');
  }
}

¿Por otro lado es posible alguna forma de que solo se cargue el tabs que el usuario pulsa y no todos a la vez?

Gracias un saludo.

6
  • Que versión de angular estas utilizando ? Commented el 15 oct. 2019 a las 17:42
  • Hola, la version es Angular 6
    – Manolait
    Commented el 15 oct. 2019 a las 17:44
  • Excelente, como estas utilizando comunicación entre componentes puedes declarar una variable del hijo en el padre y acceder al formulario y hacerle un reset() , cuando haga click en el tab Commented el 15 oct. 2019 a las 17:49
  • Hola, sería posible indicar un pequeño ejemplo? Sería con un input del padre al hijo y destruyendo el hijo?
    – Manolait
    Commented el 15 oct. 2019 a las 20:16
  • Ya te deje la respuesta pruebala y me cuentas si te sirve Commented el 15 oct. 2019 a las 21:12

2 respuestas 2

0

puedes probar algo como esto en tu html vas a declarar las variables de comunicación con los dos hijos así

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Sensores</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" (click)="borrartabs()" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Predicciones</a>
    </li>

</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
        <app-clima #variableHijo1></app-clima>
    </div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
        <app-predictions #variableHijo2></app-predictions>
    </div>
</div>

Como puedes ver se declararon las varables #variableHijo1 y #variableHijo2.

Ahora en el componente padre el cual no subiste, entonces agregas lo siguiente:

@ViewChild('variableHijo1', { static: false }) variableHijoUnoComponent: HijoUnoComponent;
@ViewChild('variableHijo2', { static: false }) variableHijoDosComponent: HijoDosComponent;

Ahora tenes que crear un método para poder saber cuando hacen click en cada tab y obviamente saber en que tab se pararon para dar el reset(), entonces en tu código html vas a agregar lo siguiente:

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" (click)="limpiarTab(1)">Sensores</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" (click)="limpiarTab(2)" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Predicciones</a>
    </li>

</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
        <app-clima #variableHijo1></app-clima>
    </div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
        <app-predictions #variableHijo2></app-predictions>
    </div>
</div>

Si te fijas en los ul > a de los tabs agregue el método limpiarTab() y envió un números lo puedes cambiar por lo que quieras.

ahora creas ese metodo de la siguiente forma en el cual vas a acceder a los formularios de cada uno de los componentes:

limpiarTab(tabSeleccionado) {
    if (tabSeleccionado === 1) {
      this.variableHijoUnoComponent.variableTuyaFrom.resert();
    } else {
      this.variableHijoDosComponent.variableTuyaFrom.resert();
    }
  }
3
  • Hola tengo algunos problemas: 1º un eror aqui { static: false }) 2º en el metodo limpir es resert? o sin la t ademas la variableTuyaFrom que seria? gracias por la ayuda.
    – Manolait
    Commented el 16 oct. 2019 a las 8:47
  • Que error te arroja en el Static ? y segundo si va con la T y tercero , la variableTuyaForm seria la variable con las que recuperas los datos del formulario, te doy un ejempo real seria algo como esto public financieraFrom: FormGroup; y lo tendrias incializado de esta forma this.financieraFrom = new FormGroup({ Commented el 16 oct. 2019 a las 13:18
  • Estas utilizando la version 6 de angular , creo que esto , { static: false }lo debes de borrar Commented el 16 oct. 2019 a las 13:51
0

Puedes utilizar *ngIf para evitar que los componentes se rendericen hasta que cambies una variable:

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <app-clima *ngIf="mostrarClima"></app-clima>
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">

    <app-predictions *ngIf="mostrarPredictions"></app-predictions>

  </div>

*ngIf

Una directiva estructural que incluye condicionalmente una plantilla basada en el valor de una expresión forzada a booleana. Cuando la expresión se evalúa como verdadera, Angular representa la plantilla proporcionada en una cláusula then, y cuando es falsa o nula, Angular representa la plantilla proporcionada en una cláusula else opcional. La plantilla predeterminada para la cláusula else está en blanco.

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.