angular4.x項目中遇到的問題和解決方法

**1. **Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'

ng build --prod 編譯時報上述錯誤 命令更改為ng build --env=prod

**2. **angular-cli修改域名及端口號

找到node_modules/angular-cli/lib/config/schema.json

default值就是默認的端口

**3. **解決input輸入框選中下面內(nèi)容是圾浅,框內(nèi)的背景色變?yōu)辄S色的bug

input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}  --> css解決

4. 解決input輸入框內(nèi)容下面有紅色波浪線的bug

spellcheck="false" 添加到html中的input元素內(nèi)部

5. isNullOrUndefined --> import { isNullOrUndefined } from "util";

如果用這個判斷數(shù)據(jù)類型或數(shù)據(jù)是都存在等...蒲跨,清空數(shù)據(jù)時要用null / undefined;

6. 頁面刷新: this.rotate.navigate(["message"]) 頁面整體刷新加載: window.location.reload();

7. ... is not a known element: 1. if ... is an Angular component ... 2. if ... is a Web Component ...

這個是沒有在module.ts文件里面引入component, 并且import這個component

8. 解決雙擊變藍的問題

<style>
  .cancelselect {
    -moz-user-select: none; /*FireFox*/
    -webkit-user-select: none; /*webkit browser*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期瀏覽器*/
    user-select: none;
  }
</style>
<div onselectstart="return false">內(nèi)容</div>

9. 對其文本: text-align-last: justify; text-align: justify;

10. core.es5.js:350 Uncaught reflect-metadata shim is required when using class

  在ployfills.ts中添加下面兩句話 import 'zone.js';  import 'reflect-metadata';

**11. **PrimeNG 一定要在根模塊引入 app.module.ts

**12. **報錯:If ngModel is used within a form tag, either the name attribute must be set or the formcontrol must be defined as ‘standalone’ in ngModelOptions.

在ng2表單中使用ngModel需要注意,必須帶有name屬性或者使用 [ngModelOptions]=”{standalone: true}”躏啰,二選其一

image

**13. **強制文本一行顯示微谓,多出的省略號表示

必須同時應(yīng)用三個:

text-overflow:ellipsis; 
white-space:nowrap; 
overflow:hidden;

強制兩行顯示:

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

**14. **"Import declaration conflicts with local declaration of '{0}'": "導(dǎo)入聲明與“{0}”的局部聲明沖突玷室。",

**15. **textarea不能調(diào)整大小的css屬性: style=” resize: none ”;

**16. **修改瀏覽器滾動條的默認樣式

/*滾動條 start*/  
   ::-webkit-scrollbar {  
          width: 10px;  
          height: 4px;  
          background-color: #F5F5F5;  
     }  
    /*定義滾動條軌道 內(nèi)陰影+圓角*/  
     ::-webkit-scrollbar-track {  
          -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
         background: #fff ;  
    }  
  /*定義滑塊 內(nèi)陰影+圓角*/  
   ::-webkit-scrollbar-thumb {
       border-radius: 3px;
       -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
       background-color:rgba(7, 170, 247, 0.7); 
   }
   ::-webkit-scrollbar-thumb:hover {  
       border-radius: 3px;   
       -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
       background-color:rgba(7, 170, 247, 1); 
   }

或者 http://blog.csdn.net/zh_rey/article/details/72473284

#scroll::-webkit-scrollbar{/*滾動條整體部分,其中的屬性有width,height,background,border等(就和一個塊級元素一樣)(位置1)*/  
    width:10px; 
    height:10px;  
 }  
 #scroll::-webkit-scrollbar-button{/*滾動條兩端的按鈕德召,可以用display:none讓其不顯示宇智,也可以添加背景圖片,顏色改變顯示效果(位置2)*/ 
    background:#74D334;  
 }  
 #scroll::-webkit-scrollbar-track{/*外層軌道瑞筐,可以用display:none讓其不顯示凄鼻,也可以添加背景圖片,顏色改變顯示效果(位置3)*/ 
    background:#FF66D5;  
 }  
 #scroll::-webkit-scrollbar-track-piece{/*內(nèi)層軌道聚假,滾動條中間部分(位置4)*/  
    background:#FF66D5; 
 }  
 #scroll::-webkit-scrollbar-thumb{/*滾動條里面可以拖動的那部分(位置5)*/  
    background:#FFA711;  
    border-radius:4px;  
 } 
 #scroll::-webkit-scrollbar-corner {/*邊角(位置6)*/  
    background:#82AFFF;
 }  
 #scroll::-webkit-scrollbar-resizer  {/*定義右下角拖動塊的樣式(位置7)*/  
    background:#FF0BEE;  
 }  
 #scroll{  
    scrollbar-arrow-color: #f4ae21; /**//*三角箭頭的顏色*/   
    scrollbar-face-color: #333; /**//*立體滾動條的顏色*/ 
    scrollbar-3dlight-color: #666; /**//*立體滾動條亮邊的顏色*/ 
    scrollbar-highlight-color: #666; /**//*滾動條空白部分的顏色*/ 
    scrollbar-shadow-color: #999; /**//*立體滾動條陰影的顏色*/  
    scrollbar-darkshadow-color: #666; /**//*立體滾動條強陰影的顏色*/
    scrollbar-track-color: #666; /**//*立體滾動條背景顏色*/ 
    scrollbar-base-color:#f8f8f8; /**//*滾動條的基本顏色*/ 
 }

**17. **Angular2中設(shè)置元素的style樣式

import { ElementRef } from '@angular/core';
constructor( private el:ElementRef ) { };
this.el.nativeElement.getElementById(' ').style.height = "";

18. Angular2 內(nèi)嵌循環(huán)

datas: Array<any> = [
      { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24" },
];
getKeys(item) {
       return Object.keys(item);
}

<div *ngFor="let item of datas">
       <div *ngFor="let key of getKeys(item)"> {{ item[key] }}</div>
 </div>

19. Argument of type 'Http' is not assignable to parameter of type 'Http'.Property 'handler' is missing in type 'Http'

image

20. 報錯:Error: Cannot find module '@angular-devkit/core' --> 進入項目目錄下執(zhí)行以下代碼 npm i --save-dev @angular-devkit/core

21. 更改base路徑: "build": "ng build --env=prod --base-href /analysis/"

22. ng2-file-upload插件块蚌,如需要添加額外參數(shù):

this.uploader = new FileUploader({
   method: 'POST',
   url: this.baseService.uploadFileUrl,
   additionalParameter: {  // 這里是添加額外參數(shù)的地方
      appType: '1'
   },
});

動態(tài)更改參數(shù):this.uploader.options.additionalParameter.appType = this.appType;上傳文件:

this.uploader.queue[this.uploader.queue.length - 1].onSuccess = (response, status) => {
    if (status == 200) { }  // 上傳文件成功
}
this.uploader.queue[this.uploader.queue.length - 1].upload();

23. 報錯:Expression has changed after it was checked

在dev模式下,額外增加了一次變化檢測膘格,在第一輪變化檢測周期結(jié)束后峭范,會立即進行第二輪變化檢測,對比兩次檢測值瘪贱,如果不相同纱控,則認為是變化檢測引起的辆毡。

在組件中增加這段代碼可以去掉這個檢查,但是不建議這么做甜害。

import {enableProdMode} from '@angular/core';
enableProdMode();

24. websocket的狀態(tài),websocket.readyState 四個值:

0 :對應(yīng)常量CONNECTING (numeric value 0) 正在建立連接連接舶掖,還沒有完成。
1 :對應(yīng)常量OPEN (numeric value 1) 連接成功建立尔店,可以進行通信眨攘。
2 :對應(yīng)常量CLOSING (numeric value 2) 連接正在進行關(guān)閉握手,即將關(guān)閉嚣州。
3 : 對應(yīng)常量CLOSED (numeric value 3) 連接已經(jīng)關(guān)閉或者根本沒有建立鲫售。

**25. **websocket的心跳重連

var ws;  //websocket實例
    var lockReconnect = false;  //避免重復(fù)連接
    var wsUrl = "ws://10.2.1.202:7888/preview";    // 創(chuàng)立連接   
    function createWebSocket(url) {
        try {
            ws = new WebSocket(url);
            initEventHandle();
        } catch (e) {
            reconnect(url);
        }     
    }
    // 初始化調(diào)用
    function initEventHandle() {
        ws.onclose = function () { reconnect(wsUrl); };
        ws.onerror = function () { reconnect(wsUrl); };
        ws.onopen = function () { //心跳檢測重置
            heartCheck.reset().start();
        };
        ws.onmessage = function (event) { //如果獲取到消息,心跳檢測重置; 拿到任何消息都說明當(dāng)前連接是正常的
            heartCheck.reset().start();
            var data = JSON.parse(event.data);
        }
    }
    function reconnect(url) {
        if(lockReconnect) return;
        lockReconnect = true;
        //沒連接上會一直重連该肴,設(shè)置延遲避免請求過多
        setTimeout(function () {
            createWebSocket(url);
            lockReconnect = false;
        }, 100);
    }    
    //心跳檢測
    var heartCheck = {
        timeout: 1000,//60秒
        timeoutObj: null,
        serverTimeoutObj: null,
        reset: function(){
            clearTimeout(this.timeoutObj);
            clearTimeout(this.serverTimeoutObj);
            return this;
        },
        start: function(){
            var self = this;
            this.timeoutObj = setTimeout(function(){
                //這里發(fā)送一個心跳情竹,后端收到后,返回一個心跳消息沙庐,onmessage拿到返回的心跳就說明連接正常
                ws.send(msg);
                self.serverTimeoutObj = setTimeout(function(){//如果超過一定時間還沒重置鲤妥,說明后端主動斷開了
                    ws.close();//如果onclose會執(zhí)行reconnect,我們執(zhí)行ws.close()就行了.如果直接執(zhí)行reconnect 會觸發(fā)onclose導(dǎo)致重連兩次
                }, self.timeout)
            }, this.timeout)
        }
    }
    // 調(diào)用
    createWebSocket(wsUrl);

26. js和jquery的localstroge

JS****下的操作方法

獲取鍵值:localStorage.getItem(‘key’)
設(shè)置鍵值:localStorage.setItem(‘key’,’value’)
清除鍵值:localStorage.removeItem(‘key’)
清除所有鍵值:localStorage.clear()
獲取鍵值2:localStorage.keyName
設(shè)置鍵值2:localStorage.keyName = ‘value’

** JQ****下的操作方法(JS****方法前加’window.’****)**

獲取鍵值:window.localStorage.getItem(‘key’)
設(shè)置鍵值:window.localStorage.setItem(‘key’,’value’)
清除鍵值:window.localStorage.removeItem(‘key’)
清除所有鍵值:window.localStorage.clear()
獲取鍵值2:window.localStorage.keyName
設(shè)置鍵值2:window.localStorage.keyName = ‘value’

27. 導(dǎo)出csv中文亂碼: var uri = 'data:text/csv;charset=utf-8,\uFEFF' + encodeURIComponent(csv);

**28. **在WPF(WinForm)中不能導(dǎo)出文件

cwBrowser.DownloadHandler = new DownloadHandler();
 /// <summary>  
 /// 下載文件  
 /// </summary>  
 public class DownloadHandler : IDownloadHandler
 {
        public void OnBeforeDownload(IBrowser browser, DownloadItem downloadItem, IBeforeDownloadCallback callback)
        {  if (!callback.IsDisposed)  
        {  using (callback)  
            {
                      callback.Continue(@"C:\Users\" +
                            System.Security.Principal.WindowsIdentity.GetCurrent().Name +
                            @"\Downloads\" +
                            downloadItem.SuggestedFileName,
                        showDialog: true);
                    }  
         }  
     }
        public void OnDownloadUpdated(IBrowser browser, DownloadItem downloadItem, IDownloadItemCallback callback)
        {
        //downloadItem.IsCancelled = false;  
     }
        public bool OnDownloadUpdated(CefSharp.DownloadItem downloadItem)
        { 
       return false; 
     }
  }

29. 窗口關(guān)閉事件

窗口關(guān)閉之后執(zhí)行的 : <body onUnload="myClose()"> 然后在javascript里定義myClose()方法

窗口關(guān)閉之前執(zhí)行的 :

window.onbeforeunload = onbeforeunload_handler; function onbeforeunload_handler(){ }

window.onbeforeunload = function(event){ alert("關(guān)閉窗口") };

區(qū)別 : onUnload方法是在關(guān)閉窗口之后執(zhí)行

onbeforeUnload方法是在關(guān)閉窗口之前執(zhí)行

說明 : 兩個方法在 頁面關(guān)閉拱雏、刷新、轉(zhuǎn)向新頁面 時都觸發(fā)底扳。

注 : 只在關(guān)閉窗口時觸發(fā)铸抑,而頁面刷新的時不觸發(fā)。

30. bootstrap的模態(tài)框 點擊背景色不取消:

$('#myModal').modal({backdrop: 'static', keyboard: false}); 
data-backdrop="static" data-keyboard="false"

backdrop:static時,空白處不關(guān)閉.

keyboard:false時,esc鍵盤不關(guān)閉.

原文來源:https://www.cnblogs.com/una1804/p/9100875.html

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末衷模,一起剝皮案震驚了整個濱河市鹊汛,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌阱冶,老刑警劉巖刁憋,帶你破解...
    沈念sama閱讀 223,126評論 6 520
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異木蹬,居然都是意外死亡至耻,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,421評論 3 400
  • 文/潘曉璐 我一進店門镊叁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來尘颓,“玉大人,你說我怎么就攤上這事晦譬“唐唬” “怎么了?”我有些...
    開封第一講書人閱讀 169,941評論 0 366
  • 文/不壞的土叔 我叫張陵敛腌,是天一觀的道長卧土。 經(jīng)常有香客問我惫皱,道長,這世上最難降的妖魔是什么尤莺? 我笑而不...
    開封第一講書人閱讀 60,294評論 1 300
  • 正文 為了忘掉前任逸吵,我火速辦了婚禮,結(jié)果婚禮上缝裁,老公的妹妹穿的比我還像新娘扫皱。我一直安慰自己,他們只是感情好捷绑,可當(dāng)我...
    茶點故事閱讀 69,295評論 6 398
  • 文/花漫 我一把揭開白布韩脑。 她就那樣靜靜地躺著,像睡著了一般粹污。 火紅的嫁衣襯著肌膚如雪段多。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,874評論 1 314
  • 那天壮吩,我揣著相機與錄音进苍,去河邊找鬼。 笑死鸭叙,一個胖子當(dāng)著我的面吹牛觉啊,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播沈贝,決...
    沈念sama閱讀 41,285評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼杠人,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了宋下?” 一聲冷哼從身側(cè)響起嗡善,我...
    開封第一講書人閱讀 40,249評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎学歧,沒想到半個月后罩引,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,760評論 1 321
  • 正文 獨居荒郊野嶺守林人離奇死亡枝笨,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,840評論 3 343
  • 正文 我和宋清朗相戀三年袁铐,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片伺帘。...
    茶點故事閱讀 40,973評論 1 354
  • 序言:一個原本活蹦亂跳的男人離奇死亡昭躺,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出伪嫁,到底是詐尸還是另有隱情领炫,我是刑警寧澤,帶...
    沈念sama閱讀 36,631評論 5 351
  • 正文 年R本政府宣布张咳,位于F島的核電站帝洪,受9級特大地震影響似舵,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜葱峡,卻給世界環(huán)境...
    茶點故事閱讀 42,315評論 3 336
  • 文/蒙蒙 一砚哗、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧砰奕,春花似錦蛛芥、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,797評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至胸哥,卻和暖如春涯竟,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背空厌。 一陣腳步聲響...
    開封第一講書人閱讀 33,926評論 1 275
  • 我被黑心中介騙來泰國打工庐船, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人嘲更。 一個月前我還...
    沈念sama閱讀 49,431評論 3 379
  • 正文 我出身青樓筐钟,卻偏偏與公主長得像,于是被迫代替她去往敵國和親哮内。 傳聞我的和親對象是個殘疾皇子盗棵,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,982評論 2 361

推薦閱讀更多精彩內(nèi)容