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

Question

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

我尝试过的：我尝试在父元素上使用* ngIf，以及一个与click事件相关联的按钮，该事件切换父div的可见性。单击该按钮时，将从DOM中删除父div（以及所有子元素）。当它再次被点击时，所有内容都会被添加回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 = "-"
  }

'open'和'closed'是在[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()"，则应该使按钮成为唯一的更改源，而不是在单击框内的任何位置时设置类。