单击关闭按钮 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.tsfeatureHide() {  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断点）

  //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)first，然后在您的 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");

}