架构师_程序员

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 338|回复: 0

[Angular] angular2 *ngIf与[hidden]对比

[复制链接]
跳转到指定楼层
楼主
发表于 2019-5-22 14:02:02
zu
在AngularJS 1中,如果想切换DOM元素的显示状态,估计你会用AngularJS 1内置的指令如:ng-show 或者 ng-hide:

AngularJS 1示例:

  1. <div ng-show="showGreeting">
  2.    Hello, there!
  3. </div>
复制代码
而angular2里,新的模版语法允许你将表达式绑定到DOM元素的任何原生属性上。 这个绝对牛逼的功能带来了无限的可能。其中一项就是绑定表达式到原生的hidden属性上,和ng-show有点像,也是为元素设置display: none:

angular2的[hidden]示例(不推荐):

  1. <div [hidden]="!showGreeting">
  2.    Hello, there!
  3. </div>
复制代码
第一眼看上面的例子,似乎就是AngularJS 1里的ng-show。其实不然,她们有着!important的不同。

ng-show和ng-hide都是通过一个叫ng-hide的CSS class来控制DOM元素的显示状态,ng-hideclass就是简单的把元素设置成display: none。这里的关键在于,AngularJS 1在ng-hide class里增加了!important,用来调整该class的优先级,使得它能够覆盖来自其他样式对该元素display属性的赋值。

再来说回本例,原生hidden属性上的display: none样式是由浏览器实现的。大多数浏览器是不会用!important来调整其优先级的。因此,通过[hidden]="expression"来控制元素显示状态就很容易意外的被其他样式覆盖掉。举个例子:如果我在其他地方对这个元素写了这样一个样式display: flex,这就比原生hidden属性的优先级高(看这里)。

基于这个原因,我们通常使用*ngIf切换元素存在状态来完成相同目标:

angular2的*ngIf示例(推荐):

  1. <div *ngIf="showGreeting">
  2.    Hello, there!
  3. </div>
复制代码
和原生hidden属性不同,angular2中的*ngIf不受样式约束。无论你写了什么样的CSS,她都是安全的。但还是有必要提一下,*ngIf并不是控制元素的显示状态,而是直接通过从模版中增加/删除元素该元素来达成显示与否这一效果的。

当然你也可以通过全局的样式给元素的hidden属性增加隐藏的优先级,譬如:display: none !important,来达到这个效果。你或许会问,既然angular小组都知道这些问题,那干嘛不在框架里直接给hidden加一个全局最高优先级的隐藏样式呢?答案是我们没法保证加全局样式对所有应用来说都是最佳选择。因为这种方式其实破坏了那些依赖原生hidden能力的功能,所以我们把选择权交给工程师。





上一篇:GitHub 给自己的项目增加开源许可协议
下一篇:Can't bind to 'ngModel' since it isn't a known property of 'input'...
帖子永久地址: 

架构师_程序员 - 论坛版权1、本主题所有言论和图片纯属会员个人意见,与本论坛立场无关
2、本站所有主题由该帖子作者发表,该帖子作者与架构师_程序员享有帖子相关版权
3、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和架构师_程序员的同意
4、帖子作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任
5、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责
6、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意
7、架构师_程序员管理员和版主有权不事先通知发贴者而删除本文

码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

Mail To:help@itsvse.com

QQ|Archiver|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2019-9-17 15:33

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表