Question

我想使用ngIf来显示这样的组件：

     <ul class="nav nav-tabs">
        <li (click)="resetTab(1)" [ngClass]="{'active': first}" id="active"><a>Tab 1</a></li>
        <li (click)="resetTab(2)" [ngClass]="{'active': second}" ><a>Tab 2</a></li>
      </ul>

      <div class="tab-content">
        <div *ngIf="first" class="tab-pane fade in active">
         Content of tab 1
        </div>
        <div *ngIf="second" class="tab-pane fade">
          Content of tab 2:
          <events-list></events-list>
        </div>
      </div>

但由于某种原因，我在切换标签时看不到我的组件（标签本身切换正常）

我的组件代码：

  resetTab(tab: number) {
    this.first = (tab == 1) ? true : false;
    this.second = (tab == 2) ? true: false;
  }

Answer 1

我尝试使用侧边栏菜单并且正常工作你可以试试这个：在HTML中

<div class="sidebar-category">
        <ul class="nav nav-pills nav-stacked">
          <li [class.active]="panelshow == 'tab1'">
            <a (click)="setPanel('tab1')">Tab1</a>
          </li>
          <li [class.active]="panelshow == 'tab2'">
            <a (click)="setPanel('tab2')">Tab2</a>
          </li>
        </ul>
</div>
<div  *ngIf="panelshow == 'tab1'"> 
</div>
<div  *ngIf="panelshow == 'tab2'">
</div>

并在组件中：

  public panelshow:string;

   private setPanel(name) {
    this.panelshow = name;
 }

在Angular 2中使用ngIf中的cmponents。

1 个答案: