时间戳

首页 > 解决方案 > 如何使用角度显示和隐藏 2 个选项卡窗格引导程序

angular - 如何使用角度显示和隐藏 2 个选项卡窗格引导程序

问题描述

我有两个选项卡面板和链接，但我不知道如何在链接中显示一个或另一个单击。

          <!-- Tabs navs -->
            <ul class="nav nav-tabs nav-fill mb-3" id="ex1" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link active" id="ex2-tab-1" (click)="showPictures();" data-mdb-toggle="tab" href="#" role="tab" aria-controls="ex2-tabs-1" aria-selected="true">Pictures</a
                >
                </li>
                <li class="nav-item" role="presentation">
                <a
                    class="nav-link"
                    id="ex2-tab-2"
                    (click)="showMap();"
                    data-mdb-toggle="tab"
                    role="tab"
                    aria-controls="ex2-tabs-2"
                    aria-selected="false"
                    >google Maps</a
                >
                </li>
            
            </ul>
            <!-- Tabs navs -->
            
            <!-- Tabs content -->
            <div class="tab-content">
                <div
                class="tab-pane fade show active"
                id="div1"
                *ngIf="div1"
                role="tabpanel"
                aria-labelledby="ex2-tab-1"
                >
               
    </div>
    <div
      class="tab-pane fade"
      *ngIf="div2"
      role="tabpanel"
      aria-labelledby="ex2-tab-2"
      id="div2"
    >
      google maps no se muestra
      {{room.mapgoogle}}
    </div>
 
  </div>



  div1:boolean=true;
  div2:boolean=true;

  showPictures(){
      this.div1=true;
      this.div2=false;
      console.log(this.div1);

      return this.div1;
 

  }

  showMap(){
      this.div2=true;
      this.div1=false;
      console.log(this.div2);
      return this.div2;

  }

如何使用角度激活每个面板我尝试使用 *ngIf 但不起作用。同样，当我单击链接“图片”时，组件会出错并重定向到 home.component.html。

标签： angulartwitter-bootstrap

解决方案

它被定向到 home.component.html （主页）是因为锚标记内的 href="#" 。

尝试将您的锚标记更改为 div 。

<div (click)="yourFunction()"><button> Picture </button><div>

请让我知道这是否有效。谢谢你。

推荐阅读