ng的显示与隐藏

Posted 2021-03-26 rockyjs

显示与隐藏有很多中方法，但是在ng中有自己的显示与隐藏的方法 ng-if 或者[hidden]

在此主要介绍的是[hidden]

在ng中需要摒弃dom操作的方法，使用[hidden]

使用方法：

eg:

通过点击事件进行显示隐藏

html：

<div class="" [hidden]="!contenters" >

    <p>123</p>

    <p>123</p>

    <p>123</p>

    <button (click)="close()">关闭</button>

</div>

<button (click)="btn()">按钮</button>

 

ts:

public  contenters:boolen = false;

 btn(){

    this.contenters =true;

  }

  close(){

    this.contenters = false;

  }

---

主要采用的是[hidden]="";

在ts中进行设置 值为false；先进行隐藏，通过点击进行显示隐藏，达到想要的效果