javascript - 我想在单击关闭按钮 Angular 6 后隐藏 div

Question

我想在 Angular 6 中单击关闭按钮后隐藏 div，而其他人想更改其他 div 类。

例如其他div类是col-sm-7，一旦单击关闭按钮，它将更改为col-sm-12。

在我的 component.html 中

<div id="custom-div">
 <button class="close" type="button" click="featureHide()">X</button>
</div>
<div id="another-div" class="col-sm-7"></div>

在我的 component.ts 中

featureHide() {
  document.getElementById('custom-div').style.display='none';
  var element = document.getElementById("another-div");
  element.classList.add("col-sm-12");
}  

但它不起作用，请提出建议。

Answer 1

我建议使用 Angular [ngClass]相反指令:

这里是stackblitz working example (记得展开浏览器选项卡以超过 sm 断点)

  //Apply [hidden] to hide the button
<div id="custom-div" [hidden]="!isShow" >
  // Use '(click)' instead of 'click' 
  <button class="close" type="button" (click)="featureHide()">X</button>
</div>
  //Apply [ngClass] directive
<div id="another-div" [ngClass]="{'col-sm-7': isShow , 'col-sm-12': !isShow }"></div>

在你的 ts 文件中:

isShow = true;

featureHide() {
 this.isShow= false;
};

也可以按照您尝试的方式完成，但首先将 click 更改为 (click)，然后在您的 ts 中:

featureHide() {
  document.getElementById('custom-div').style.display = 'none';
  const element = document.getElementById("another-div");
  element.classList.remove("col-sm-7");
  element.classList.add("col-sm-12");
}