我想在点击关闭按钮 Angular 后隐藏 div 6

Question

我想在 Angular 6 中单击关闭按钮后隐藏 div 其他人想更改其他人 div class.

例如其他 div class 是 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 中是错误的。尝试避免 document.xxx 使用 angular.xxx。请找到以下代码

在component.html

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

在我的 component.ts hideFalg:Boolean = 真

featureHide()
{
  this.hideFalg = false; // this code will hide the div element since we have added the *ngIf
}

显示div

showDiv(){
this.hideFalg = true;
}

Answer 2

我建议改用 Angular [ngClass] 指令：

这里一个stackblitz working example（记得展开浏览器tab超过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");
}

我想在点击关闭按钮 Angular 后隐藏 div 6

I want to hide div after clicking on close button Angular 6

javascript

typescript

angular6