单击关闭按钮 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 工作示例（记得展开浏览器选项卡以超过sm断点）&nbsp; //Apply [hidden] to hide the button<div id="custom-div" [hidden]="!isShow" >&nbsp; // Use '(click)' instead of 'click'&nbsp;&nbsp; <button class="close" type="button" (click)="featureHide()">X</button></div>&nbsp; //Apply [ngClass] directive<div id="another-div" [ngClass]="{'col-sm-7': isShow , 'col-sm-12': !isShow }"></div>在您的 ts 文件中：isShow = true;featureHide() {&nbsp;this.isShow= false;};也可以按照您尝试的方式完成，但更改click为(click)first，然后在您的 ts 中：featureHide() {&nbsp; document.getElementById('custom-div').style.display = 'none';&nbsp; const element = document.getElementById("another-div");&nbsp; element.classList.remove("col-sm-7");&nbsp; element.classList.add("col-sm-12");}&nbsp;&nbsp;