如何在Angular 2/Typescript中触发Bootstrap折叠？

Question

假设我有一个面板(panel)，我想根据下拉列表的选择值来展开/折叠它。

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

这是一个下拉列表（dropdownlist）。

<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中实现相同的效果？

- Richard77

---

你是否正在使用Bootstrap Angular库？ - FAISAL

不，我不知道有这样一个东西。 - Richard77

Answer 1

如果您添加了in类，Bootstrap将显示

，并在删除in类时隐藏

。

基本解决方案如下所示。

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

在你的类中添加一个布尔变量。

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>

Component.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;
    }
  `]

- Sangram Nandkhile

---

它正在工作。动画在哪里？过渡有点粗暴。哈哈！ - Richard77

@Richard77 我同意，伙计。目前还没有针对动画的开箱即用支持。我看到他们正在研究这个问题。你需要一些 CSS 和少量的 JS 代码来解决它。可以查看这个 plunker https://plnkr.co/edit/VLQ4Izy4VBZdm71UcRWZ?p=preview - Sangram Nandkhile

我有点困惑。我应该用 class="card card-block card-header block" 替换 class="collapse" 吗？ - Richard77

是的。删除折叠类很重要，因为Bootstrap的“折叠”CSS样式将隐藏div。为了避免与Bootstrap类的行为冲突，我们使用了一个新类别叫做“block”。将“collapse”替换为“block”，因为样式是为“block”定义的。您可以忽略并删除card card-block card-header类。 - Sangram Nandkhile

抱歉，很久才接受你的答案。事实上，我现在对Angular有了更好的理解。它运行良好。非常感谢。 - Richard77

很高兴能帮到你。我之前也遇到过类似的问题，所以能够帮助你解决这个问题。 - Sangram Nandkhile

Answer 2

Bootstrap 5会在你添加in和show类时显示div，并在移除这些类时隐藏div。

这对我很有效。

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

- SimoneMSR