Angular7樣式失效問題解決方案

2021-09-14 05:30:06 字數 615 閱讀 3757

在angular專案的樣式調整中,發現了一下特別的實現問題.就是在對乙個封裝好了樣式的控制項進行顯示/隱藏的切換時,出現了樣式的丟失情況.

//產生樣式丟失的情況①

style="display: none;"

//產生樣式丟失的情況②

document.getelementbyid('#listcode').style.display = 'none';

對於上面的兩個樣式**來說,第一種使用方式無疑會直接將控制項原有的style屬性覆蓋了.然而在ts檔案使用第二種的**樣式來實現頁面的切換時也會發生樣式的覆蓋.

在這次頁面中我需要進行顯示切換的是slides輪播圖標籤,使用了上方的實現之後顯示沒有差別,但是滑動輪播圖頁面時就會像幕布一樣卡頓,丟失了自動滑動的效果.在angular已有的方法中最後選用了ngif的方法來實現效果.下面是實現**:

html 觸發切換顯示的按鈕

......需要切換顯示的標籤

ts 切換顯示的方法

changeshow(code)

前端樣式的設計會有很多的方式,除了不斷的積累經驗,還要不時的記下這些特別的問題,在以後的實現中更高效簡潔的實現.榮幸與您分享~

angular7中解決跨域問題

在前後端分離開發的過程中,跨域問題是不可避免的。在angular中如何解決跨域問題呢?和在vue中類似,同樣適用 1.在angular專案根目錄下建立proxy.config.json檔案 2.在angular.json檔案中新增如下 啟動服務 ng serve 請求使用 ajax資料測試 post...

解決IE6 IE7 IE8樣式不相容問題

ie6裡div錯位的問題 採用 float left 的div在ie8 ie7 都沒問題,ie6下卻向下移動,出現空白。這是因為,ie6採用的核心預設把div之間的距離增加了3 5個px,所以,試試是將下移的div的style裡增加 margin left 5px 或者更小。解決ie7 ie8樣式不...

打包上線後IE9樣式不顯示問題

react and design系統需要相容ie9,引入babel polyfill後,開發環境正常,生產環境上ie9樣式缺失。ie9上,原本寫好的樣式大多數都不見了,發現ie7 ie8 ie9對css大小有限制,其中ie9限制在250kb,正好系統中的打包完的css大小為790kb 引入css s...