时间戳

首页 > 解决方案 > 无法使用 angular2+ 在同一页面中显示不同的视图

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

问题描述

在这里，我试图在单页中显示各种视图。也就是说，在同一页面中，我创建了 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

标签： angulartypescript

解决方案

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

推荐阅读