不要（不建议）在Angular项目中使用hidden属性

如果想要隐藏某个DOM元素，在AngularJS中可以使用ng-show,ng-hide,或者ng-if。Angular中其实使用了HTML原生的hidden属性进行元素显示隐藏，hidden属性其实是为元素添加了display: none样式。

但问题在于如果这个元素被赋予了其他样式比如display: block之类的，那么他就会覆盖掉hidden样式，导致元素无法隐藏。AngularJS虽然也是使用ng-hide类来控制元素显示，但它后面跟随了!important属性，所以样式不会被覆盖。

那么在Angular项目中隐藏元素的推荐方式呢？

1 . 为hidden属性样式添加!important:

[hidden]: { display: none !important; }

2 . 不使用hidden属性，转为直接定义display属性：

<p [style.display]="hideElement?'none':'inherit'">
   I am using hidden.
</p>

这样会覆盖元素的CSS类样式

3 . 使用*ngIf
他会直接移除DOM元素，所以不存在display是否生效的问题了。

参考：http://www.talkingdotnet.com/dont-use-hidden-attribute-angularjs-2/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!