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输入框选中下面内容是,框内的背景色变为黄色的bug
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;} --> css解决
4. 解决input输入框内容下面有红色波浪线的bug
spellcheck="false" 添加到html中的input元素内部
5. isNullOrUndefined --> import { isNullOrUndefined } from "util";
如果用这个判断数据类型或数据是都存在等...,清空数据时要用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">内容</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}”,二选其一
13. 强制文本一行显示,多出的省略号表示
必须同时应用三个:
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}'": "导入声明与“{0}”的局部声明冲突。",
15. textarea不能调整大小的css属性: style=” resize: none ”;
16. 修改浏览器滚动条的默认样式
/*滚动条 start*/
::-webkit-scrollbar {
width: 10px;
height: 4px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background: #fff ;
}
/*定义滑块 内阴影+圆角*/
::-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{/*内层轨道,滚动条中间部分(位置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中设置元素的style样式
import { ElementRef } from '@angular/core';
constructor( private el:ElementRef ) { };
this.el.nativeElement.getElementById(' ').style.height = "";
18. Angular2 内嵌循环
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'
20. 报错:Error: Cannot find module '@angular-devkit/core' --> 进入项目目录下执行以下代码 npm i --save-dev @angular-devkit/core
21. 更改base路径: "build": "ng build --env=prod --base-href /analysis/"
22. ng2-file-upload插件,如需要添加额外参数:
this.uploader = new FileUploader({
method: 'POST',
url: this.baseService.uploadFileUrl,
additionalParameter: { // 这里是添加额外参数的地方
appType: '1'
},
});
动态更改参数: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模式下,额外增加了一次变化检测,在第一轮变化检测周期结束后,会立即进行第二轮变化检测,对比两次检测值,如果不相同,则认为是变化检测引起的。
在组件中增加这段代码可以去掉这个检查,但是不建议这么做。
import {enableProdMode} from '@angular/core';
enableProdMode();
24. websocket的状态,websocket.readyState 四个值:
0 :对应常量CONNECTING (numeric value 0) 正在建立连接连接,还没有完成。
1 :对应常量OPEN (numeric value 1) 连接成功建立,可以进行通信。
2 :对应常量CLOSING (numeric value 2) 连接正在进行关闭握手,即将关闭。
3 : 对应常量CLOSED (numeric value 3) 连接已经关闭或者根本没有建立。
25. websocket的心跳重连
var ws; //websocket实例
var lockReconnect = false; //避免重复连接
var wsUrl = "ws://10.2.1.202:7888/preview"; // 创立连接
function createWebSocket(url) {
try {
ws = new WebSocket(url);
initEventHandle();
} catch (e) {
reconnect(url);
}
}
// 初始化调用
function initEventHandle() {
ws.onclose = function () { reconnect(wsUrl); };
ws.onerror = function () { reconnect(wsUrl); };
ws.onopen = function () { //心跳检测重置
heartCheck.reset().start();
};
ws.onmessage = function (event) { //如果获取到消息,心跳检测重置; 拿到任何消息都说明当前连接是正常的
heartCheck.reset().start();
var data = JSON.parse(event.data);
}
}
function reconnect(url) {
if(lockReconnect) return;
lockReconnect = true;
//没连接上会一直重连,设置延迟避免请求过多
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(){
//这里发送一个心跳,后端收到后,返回一个心跳消息,onmessage拿到返回的心跳就说明连接正常
ws.send(msg);
self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置,说明后端主动断开了
ws.close();//如果onclose会执行reconnect,我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
}, self.timeout)
}, this.timeout)
}
}
// 调用
createWebSocket(wsUrl);
26. js和jquery的localstroge
JS下的操作方法
获取键值:localStorage.getItem(‘key’)
设置键值:localStorage.setItem(‘key’,’value’)
清除键值:localStorage.removeItem(‘key’)
清除所有键值:localStorage.clear()
获取键值2:localStorage.keyName
设置键值2:localStorage.keyName = ‘value’
JQ下的操作方法(JS方法前加’window.’)
获取键值:window.localStorage.getItem(‘key’)
设置键值:window.localStorage.setItem(‘key’,’value’)
清除键值:window.localStorage.removeItem(‘key’)
清除所有键值:window.localStorage.clear()
获取键值2:window.localStorage.keyName
设置键值2:window.localStorage.keyName = ‘value’
27. 导出csv中文乱码: var uri = 'data:text/csv;charset=utf-8,\uFEFF' + encodeURIComponent(csv);
28. 在WPF(WinForm)中不能导出文件
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. 窗口关闭事件
窗口关闭之后执行的 : <body onUnload="myClose()"> 然后在javascript里定义myClose()方法
窗口关闭之前执行的 :
window.onbeforeunload = onbeforeunload_handler; function onbeforeunload_handler(){ }
window.onbeforeunload = function(event){ alert("关闭窗口") };
区别 : onUnload方法是在关闭窗口之后执行
onbeforeUnload方法是在关闭窗口之前执行
说明 : 两个方法在 页面关闭、刷新、转向新页面 时都触发。
注 : 只在关闭窗口时触发,而页面刷新的时不触发。
30. bootstrap的模态框 点击背景色不取消:
$('#myModal').modal({backdrop: 'static', keyboard: false});
data-backdrop="static" data-keyboard="false"
backdrop:static时,空白处不关闭.
keyboard:false时,esc键盘不关闭.
原文来源:https://www.cnblogs.com/una1804/p/9100875.html
搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等。本文将分别探讨在angular.js和vue.js中如何实现对用户输入的防抖。
如果想像我一样全面的了解Angular的脏值检测机制,除了浏览源代码之外别无他法,网上可没有太多可用信息。大部分文章都提到,Angular中每个组件都自带一个脏值检测器,但是它们都仅仅停留在脏值检测的策略和案例的使用,并没有做太多的深入。
每次我读到 Angular 如何操作 DOM 相关文章时,总会发现这些文章提到 ElementRef、TemplateRef、ViewContainerRef 和其他的类。尽管这些类在 Angular 官方文档或相关文章会有涉及,但是很少会去描述整体思路
使用 angular JS 的时候,把 angularJS 放到文件底部,在渲染页面的时候,会出现闪一下的情况。解决办法:1、使用 ng-cloak ;2、将angular.js的引入放到head前,提前加载;3、使用 ng-bind
在使用Angular的时候,希望能像VUE那样,修改代码后浏览器不刷新,页面对应修改的组件自动更新的功能。这个功能的名字时HMR (hot module replace)。稍微研究了一下,发现在angular/cli创建的项目中,实现这个不算太难,步骤如下
Angular 6目的是为了使Angular变得更小,更快,更易于使用。Angular 6版本更加关注底层框架和工具链,同时加快了工具链在Angular中的运行速度,除此以外,这次更新还包括框架包
ngClass要绑定的类名会在tr根据数据循环生成html的过程中调用组件中定义的isHideClass方法,并把i(index)带过去让方法使用根据方法逻辑返回的类名去绑定写好的样式
这篇文章主要介绍了Angularjs的$http异步删除数据详解及实例的相关资料,这里提供实现思路及实现具体的方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。
在angularJS中定义服务共有四种常见的方式:factory,service,provider,constant,value.使用形式的不同:
表单提交,表单全部校验成功才能提交,当表单校验错误,表单边框变红,同时有错误提示信息,有重置功能。在分析代码之前,首先明确 FormControl、formControl、formControlName、FormGroup...
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!