单击父元素时向子元素添加类

Question

预期： 当用户点击一个按钮时，类会从父元素和一些子元素中添加/删除（以便展开/折叠文本输入框）

我尝试过的： 我尝试在父元素上使用 *ngIf，以及一个与单击事件相关联的按钮，该事件切换父 div 的可见性。单击按钮时，父 div（以及所有子元素）将从 DOM 中删除。再次单击它时，所有内容都将添加回 DOM。这行得通，但并不是它在设计方面不能很好地发挥作用。

我想要一种将 [ngClass] 绑定到按钮单击的方法，这将以某种方式向父元素及其子元素添加/删除类。在下面的代码中，我只使用了一个单击事件 [ngClass] 和一个与该单击事件相关联的单独按钮。它有点工作，但不完全是因为该按钮未绑定到 [ngClass]，并且单击框中的任意位置会导致添加类，这会导致文本框在不应该折叠时折叠 - 仅按钮本身“有效”，因为它位于 'flex-full-layout section-white-background' div 中。仅当按钮滑动时，文本框才应展开/折叠。我希望能够通过单击该单个按钮从父元素和子元素中添加/删除类

HTML：

<div class="layout-column flex-full-layout flex-50 column-one">
    <button (click)="showHide()" id="btToggle" class="btn btn-info btn-sm ToggleVisibility" >{{buttonName}}</button>
    <div class="flex-full-layout section-white-background (click)="showHide()" [ngClass]="status ? 'open' : 'closed'"> 
      <fieldset class="no-bottom-padding">
        <legend class="ce-patient-legend-style">Insurance</legend>
        ## unneeded stuff
      </fieldset>
</div>

TS：

  status: boolean = false;
  buttonName : any = '-';

  showHide(){
    this.status = !this.status;  

if(this.status) 
  this.buttonName = "+";
else
  this.buttonName = "-"
  }

“打开”和“关闭”是在 [ngClass] 中设置的类。然后我为这两个类设置 CSS，并根据哪个类处于活动状态来应用 CSS

CSS：

.open {
  height: 17px;
}

.closed {
  height: 100%;
}

单击“ToggleVisibility”按钮应从父“flex-full-layout section-white-background”元素及其子元素中添加/删除类

Answer 1

ngClass 指令用于打开或关闭特定类，但您没有在 ngClass 中指定要设置/更改的类。

试试这个：

<div class="flex-full-layout section-white-background" 
     [ngClass]="{open: status, closed: !status}">
  ...your child elements here...
</div>

这会根据status 的当前值设置或删除open 和closed 类。

此外，如果您从 div 中删除 (click)="showHide()"，则应该使按钮成为唯一的更改源，而不是在您单击框内的任意位置时设置类。