Anzeigen und Verbergen zwischen zwei Elementen umschalten

Question

Ich habe ein tabs nav Element, das zwei Registerkarten hat, muss eine Komponente basierend darauf zeigen, welche Registerkarte angeklickt wurde und die andere Komponente ausblenden. Wenn die angeklickte Registerkarte bereits "aktiv" ist, muss die Komponente weiterhin angezeigt werden.

Ich habe das funktioniert, aber es scheint mir sehr ineffizient. Kann mir jemand einen besseren Weg zeigen, dies zu tun?

Hier ist, wie ich es jetzt eingerichtet habe. Um nicht jede Datei in der Frage zu veröffentlichen, wissen Sie, dass das Projekt korrekt eingerichtet ist.

@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

Hier ist eine weitere Möglichkeit, es zu tun.

1.Initialize currentContent Variable auf Standard Inhalt Wert.

2.Klicken Sie auf einen Knopf und stellen Sie den Wert auf den gewünschten Inhalt ein.

3. Zeigen Sie das div, wenn currentContent mit dem gewünschtenWert übereinstimmt.

@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

Ein weiterer Weg ist die Verwendung von Brodcasting-Ereignissen. Erstellen Sie in diesem Fall eine beobachtbare Brodcaster- und Brodcast-Nachricht, um andere Popups zu schließen, wenn ein Popup geöffnet wird. https://blog.lacolaco.net/post/event-broadcasting-in-angular-2/ verwenden Sie es, wenn mehrere Datumsauswahl oder Dropdown auf der Webseite vorhanden sind und einzeln geöffnet werden müssen. Ich habe es verwendet, sehr hilfreich, um den Kommentar-Typ von Dropdown zu machen.