angular 内容的显示和隐藏： component.ts变量控制＜span＞内容显示隐藏 ng-show/ng-hide/ng-if/ng-switch,hidden

最新推荐文章于 2024-11-27 02:18:57 发布

努力不脱发选手

最新推荐文章于 2024-11-27 02:18:57 发布

阅读量4.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： primeNG angular 文章标签： typescript javascript

本文链接：https://blog.youkuaiyun.com/weixin_41147129/article/details/109182633

angular 同时被 2 个专栏收录

7 篇文章

订阅专栏

primeNG

2 篇文章

订阅专栏

Angular通过修改数据模型驱动UI刷新，使用ngIf、ngShow/hide和ngSwitch等指令控制元素的显示与隐藏。ngIf根据布尔值决定是否创建DOM节点，ngShow/hide通过添加class改变display属性，ngSwitch则根据变量值切换内容。hidden属性则直接设置元素的hidden属性来隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

显示和隐藏元素是, Angular是通过修改数据模型DOM的方式来驱动UI刷新，然后通过指令把变更反应到UI上。

一：用ng

ngIf,ngFor… 在angular里被称为是结构型指令.所谓结构型指令,就是它能够塑造或重塑DOM的结构. 说句话就是在渲染的时候它能够帮你增加,删除,维护这些元素.

ng-show/ng-hide:
ng-show是满足条件就展示,ng-hide是满足条件就隐藏.
因为它们用法差不多,所以下面就单纯讲ng-show.
ng-show接收的是一个boolean值,当为值true的时候就去展示DOM节点,当值为false的时候,在dom节点上就添加一个ng-hide的类,这个类的样式是"display:none".
在DOM节点被加载的时候,ng-show里面的所有节点都会被加载,也就是说ng-show仅仅是隐藏和显示DOM节点而已.也就说当存在很多ng-show指令时候,即使它们不显示,但是它们所在的DOM节点还是会被浏览器渲染的.

ng-switch:
ng-switch要先监听一个变量,当此变量为什么值的时候下面就显示什么内容.
举个例子:
ng-switch监听了一个type这么一个变量,当type的值等于"a"的时候,那么这块区域就会被创建并显示;当type的值为"b"的时候,这块区域(a所控制的区域)就会被销毁,然后"b"所控制的那个区域(dom)就会被创建并且显示.

ng-if:
也是接收一个bool值,当值为false时,它所控制的节点并不会被创建,也可以说之前的DOM节点会被销毁掉,哪怕这个节点里面包含有很ng指令的绑定都不会去执行.
所以在我们的项目中,如果没有必要一次性生成完所有的dom,那么就可以用ng-if来按需生成,从而加快了dom的加载速度.特别是在repeat的时候,每条数据又包含了复杂的数据结构的时候效果特别明显,因为只有当ng-if的传入值为true的时候,才会创建它所控制的节点.

html

<span *ngIf="switch">xxx金额:{{usableBonus | number:'1.2-2'}}元; </span>

component.ts

export class xxxxComponent implements OnInit {

  switch: Boolean= false;

false不显示 true显示。

在远古时代，原生js是这样实现隐藏，显示的

<html>
<body>
<div id= "yjj">XXX</div>
</body>
</html>

<script>

 var btn = document.getElementById("yjj");
    btn.onclick =function(){
	alert("success");
	btn.style.display = 'none'}
	
      
</script>

二用 hidden

<p-column field="id" hidden="hiddenInComponent"></p-column>

在component.ts里面 hiddenInComponent : boolean = false / true

angular 内容的显示和隐藏： component.ts变量控制＜span＞内容显示隐藏 ng-show/ng-hide/ng-if/ng-switch,hidden

一 ： 用ng

一：用ng