Angular7样式失效问题解决方案

前言

     在Angular项目的样式调整中,发现了一下特别的实现问题.就是在对一个封装好了样式的控件进行显示/隐藏的切换时,出现了样式的丢失情况.

//产生样式丢失的情况①
style="display: none;"

//产生样式丢失的情况②
document.getElementById('#listCode').style.display = 'none';

概述

     对于上面的两个样式代码来说,第一种使用方式无疑会直接将控件原有的style属性覆盖了.然而在Ts文件使用第二种的代码样式来实现页面的切换时也会发生样式的覆盖.
     在这次页面中我需要进行显示切换的是slides轮播图标签,使用了上方的实现之后显示没有差别,但是滑动轮播图页面时就会像幕布一样卡顿,丢失了自动滑动的效果.在Angular已有的方法中最后选用了ngIf的方法来实现效果.下面是实现代码:

//// html 触发切换显示的按钮



......需要切换显示的标签



//// ts 切换显示的方法
changeShow(code){
	this.slides  = code;
}

小结

     前端样式的设计会有很多的方式,除了不断的积累经验,还要不时的记下这些特别的问题,在以后的实现中更高效简洁的实现.荣幸与您分享~