ciickで現在のカレンダーと前のカレンダーを非表示にしますか？

Question

私は、クリックして開くと非表示にする複数のdivがあります。私が欲しいのは、バックボタンを持っているので、ユーザがそれをクリックして現在のdivを隠してから前のものを開くときです。どのように私はそれを行うことができますどのような提案？ブール変数true - falseでdivを表示および非表示にします。歴史のようなものですが、それらはすべて同じページにあります。

<div *ngIf="visible = !visible"></div> 
<div *ngIf="visible1 = !visible1"></div> 
<div *ngIf="visible2 = !visible2"></div> 
<div *ngIf="visible3 = !visible3"></div> 

例：私はdiv 3の内容を表示したい場合は、私がdiv 2div 1とdiv 4から来ることができます。だから私はそれを隠すためにボタンを押し、そのdivを開くときに私がそうなったdivを覚えておきたい。

Answer 1

arrayを作成して、どのdivがクリック/非表示になっているかを把握できます。次に、戻るボタンをクリックすると、最後に追加されたdivを取得するためのポップアップを行うことができます。その戻り値はdivを表示するために使用できます。

サンプルコード：

<div *ngIf="visible1 == true" (click)="visible1 = false; addToHistory('visible1')" 
      style="width: 400px; height: 50px; background: skyblue; margin-bottom: 5px"> 
      Div 1 
</div> 

componet.ts

history = []; 

    visible1 = true; 
    visible2 = true; 
    visible3 = true; 
    visible4 = true; 

    constructor() { 
    } 

    addToHistory(value){ 
    this.history.push(value); 
    } 

    getFromHistory(){ 
    let x = this.history.pop(); 

    if(x == 'visible1'){ 
     this.visible1 = true; 
    } 
    if(x == 'visible2'){ 
     this.visible2 = true; 
    } 
    if(x == 'visible3'){ 
     this.visible3 = true; 
    } 
    if(x == 'visible4'){ 
     this.visible4 = true; 
    } 
    } 

Plunker demo