jquery - 如何在 Angular 2/Typescript 中触发引导崩溃

Question

假设我有这个面板。我希望能够根据下拉列表的选定值展开/折叠它。

<div class="collapse" id="collapseExample">
    <div class="well">
        ...
    </div>
</div>

这是下拉列表。

<select id="state" name="state"
        [(ngModel)]="stateId"    
        (change)="onChange($event.target.id, $event.target.value)"
        class="form-control">
        <option *ngFor="let r of statesList"
            value="{{ r.id }}">{{ r.name }}
        </option>
</select>

这是事件处理程序。并且，如果选择了一个状态，则展开面板。否则，折叠面板。

//Events
onChange(id: string, deviceValue: string) {
     if (id == "state") {
        if (deviceValue) {
            //expend the panel...
        }
        else{
            //collapse the panel...
        }
     }
}

使用 Jquery，我可以做类似的事情:$("#collapseExample").collapse();。

如何在 Angular/Typescript 中得到相同的东西？

Answer 1

如果您添加 in 类，bootstrap 将显示 div，当 in 类被删除时，它会隐藏该 div。

基本的解决方案看起来像这样。

<div class="collapse" id="collapseExample" [ngClass]="{'in': isOpen}">
    <div class="well">
        ...
    </div>
</div>

向您的类添加一个 bool 变量。

isOpen: boolean;

并根据您的业务限制进行设置。

 onChange(id: string, deviceValue: string) {
              if (id == 'state') {
                  if (deviceValue) // {
                      //expand the panel...
                      this.isOpen = true;
                  }
                  else {
                      //collapse the panel...
                      this.isOpen = false;
                  }
              }
          }

但是，我建议您创建一个可以在整个解决方案中实现的自定义指令，并且您可以避免在任何地方编写 [ngClass]="isOpen ? 'in' : ''"。 您可以使用自己的指令，例如

<div class="collapse" id="collapseExample" [btCollapse]="isOpen">

更新:支持动画。

<div id="demo" class="block" [style.height]="height + 'px'" #my>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>

<select id="state" name="state"
        [(ngModel)]="stateId"    
        (change)="onChange($event.target.id, $event.target.value, my.scrollHeight)"
        class="form-control">
        <option *ngFor="let r of statesList"
            value="{{ r.id }}">{{ r.name }}
        </option>

组件.ts 在类中声明一个新变量。

height = 0;

onChange(id: string, deviceValue: string, height: number) {

      if (id == 'state') {
          if (deviceValue == '1') {
              //expand the panel...
              this.height = height;
          }
          else {
              //collapse the panel...
              this.height = 0;
          }
      }
  }

不要忘记在内联组件样式或共享 css 文件中添加样式。

styles: [`
    .block {
      overflow: hidden;
      -webkit-transition: height .5s;
      transition: height .5s;
    }
  `]