单击父元素时将类添加到子元素

Question

期望的是： 当用户单击按钮时，会从父元素和某些子元素中添加/删除类（以展开/折叠文本输入框）

我尝试过的方法： 我试过在父元素上使用* ngIf，以及与单击事件绑定的按钮，该按钮可切换父div的可见性。单击按钮后，父div（以及所有子元素）将从DOM中删除。再次单击时，所有内容都会添加回DOM。这行得通，但并不是在设计上无法正常运行。

我想要一种将[ngClass]绑定到按钮单击的方法，这将以某种方式将类添加/删除到父元素及其子元素。在下面的代码中，我仅使用click事件[ngClass]和与该click事件相关的单独按钮。这样做是可行的，但不完全是因为该按钮没有与[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>

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

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