Basculer l'affichage et la dissimulation entre deux éléments

Question

J'ai un élément de navigation tabs qui a deux onglets, il doit afficher un composant en fonction de l'onglet cliqué et cacher l'autre composant. Si l'onglet cliqué est déjà "actif", le composant doit rester visible.

J'ai ceci fonctionnant, mais il me semble très inefficace. Quelqu'un peut-il me montrer une meilleure façon de le faire?

Voici comment je l'ai configuré maintenant. Pour ne pas publier tous les fichiers dans la question, sachez que le projet est correctement configuré.

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <button type="button" (click)="changeShowStatus(oneShowing=true,twoShowing=false)">1</button> 
     <button type="button" (click)="changeShowStatus(twoShowing=true,oneShowing=false)">2</button> 
     <div class="box1" *ngIf="oneShowing"> 
     <p>some content</p> 
     </div> 
     <div class="box2" *ngIf="twoShowing"> 
     <p>some content2</p> 
     </div> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    oneShowing:boolean; 
    twoShowing:boolean 

    constructor() { 
    this.oneShowing = true; 
    this.twoShowing = false 
    } 
} 

Plunker

Answer 1

@Component({ 
 
    selector: 'my-app', 
 
    template: ` 
 
    <div> 
 
    <button type="button" (click)="activeIndex = 1">1</button> 
 
    <button type="button" (click)="activeIndex = 2">2</button> 
 
    <div class="box1" *ngIf="activeIndex === 1"> 
 
    <p>some content</p> 
 
    </div> 
 
    <div class="box2" *ngIf="activeIndex === 2"> 
 
    <p>some content2</p> 
 
    </div> 
 
</div> 
 
    `, 
 
}) 
 
export class App { 
 
    activeIndex = 0; 
 

 
    constructor() { 
 
    } 
 
}

Answer 2

est ici une autre façon de le faire. 0Initialiser la variable currentContent à la valeur par défaut du contenu

2.Un clic sur un bouton définit sa valeur pour le contenu souhaité.

3.Affichez la div si currentContent correspond à la valeur désirée.

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <button type="button" (click)="currentContent='content1'">1</button> 
     <button type="button" (click)="currentContent='content2'">2</button> 
     <div class="box1" *ngIf="currentContent==='content1'"> 
     <p>some content</p> 
     </div> 
     <div class="box2" *ngIf="currentContent==='content2'"> 
     <p>some content2</p> 
     </div> 
    </div> 
    `, 
}) 
export class App { 
    name: string; 
    currentContent: string = "content1"; //default tab 

    constructor() { 

    } 
} 

Answer 3

Une autre façon consiste à utiliser des événements de diffusion. Dans ce cas, créez un message brodcaster et brodcast observable pour fermer d'autres fenêtres contextuelles lorsqu'une fenêtre contextuelle est sur le point d'être ouverte. https://blog.lacolaco.net/post/event-broadcasting-in-angular-2/ l'utiliser lorsque plusieurs sélecteurs de date ou liste déroulante sont présents sur la page Web et doivent en ouvrir un à la fois. Je l'ai utilisé, très utile pour faire un commentaire type de liste déroulante.