在 Angular 2 中使用 ngIf 中的组件。答案

【问题标题】：Using cmponents inside ngIf in Angular 2.在 Angular 2 中使用 ngIf 中的组件。
【发布时间】：2016-10-24 09:17:15
【问题描述】：

我想使用 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;
  }

【问题讨论】：

你用的是什么标签组件？
@GünterZöchbauer 我正在使用引导程序创建选项卡。而且事件列表只是我的服装组件，没有'ngif'就可以很好地显示。
您使用github.com/ng-bootstrap/ng-bootstrap 或valor-software.com/ng2-bootstrap 还是普通引导程序？
这是因为您没有在 tab-pane div 上更改课程。而且您的第二个标签始终处于隐藏状态plnkr.co/edit/Sg74uQ8Son78Cvkhg8Fb?p=info
@yurzui 谢谢，我没注意到。顺便问一下，为什么在第二个选项卡上调用时要传递$event 参数？

标签： javascript angular angular2-template angular2-components

【解决方案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;
 }

【讨论】：