Question

在这里，我试图在单个页面中显示各种视图。那是在同一页面上，我创建了3个不同的div，每个视图都有不同的内容。在这里，我可以导航到2个视图，但是当我按下按钮时获得第3个视图，它将同时显示第2个和第3个视图

下面是我的代码：

<div class="container">


    <div *ngIf="showData">
         <p>This is page 1</p>
        <button class="btn btn-primary" (click)="testOne()">Page 1
         </button>
           <br>
           <br>
         <button (click)="page3()" >click here for page 3</button>
    </div>
    <hr/>
    <div *ngIf="!showData">
        <p> this is page 2</p>
        <button class="btn btn-primary" (click)="back()">Back to page1</button>
    </div>

    <div *ngIf="!showData">
       <p>Page 3</p>
    </div>  

</div>  

 showData = true;


  testOne(){
    this.showData = false;
  }

  back(){
    this.showData = true;
  }

  page3(){
    this.showData = false;
  }

下面是我的堆栈闪电网址

https://stackblitz.com/edit/angular-vyw1cs

Answer 1

请检查以下stackblitz网址，我已经更新了与您附加的相同的stackblitz。 https://stackblitz.com/edit/angular-j1vsy7 还可以进一步优化代码，以使您大致了解如何使用三个单独的变量来实现它。

使用angular2 +无法在同一页面上显示不同的视图

1 个答案: