本文将探讨material2中popup弹窗即其Dialog模块的实现。 使用方法 引入弹窗模块自己准备作为模板的弹窗内容组件在需要使用的组件内注入 MatDialog 服务调用 open 方法创建弹窗，并支持传入配置、数据，以及对关闭事件的订阅深入源码 进入material2的源码，先从 MatDialog 的代码入手，找到这个 open 方法: open<T>(componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,config?: MatDialogConfig ): MatDialogRef<T> {// 防...
一、现象 全屏页面中的图表，在很多的时候需要 resize 一把，以适应页面的大小变化 二、解决 1、引入 ： import { Observable } from rxjs;2、使用(在ngOnInit方法中)： ngOnInit() {// 页面监听Observable.fromEvent(window, resize).debounceTime(100) // 以免频繁处理.subscribe((event) => {// 这里处理页面变化时的操作console.log(come on ..);}); }三、总结 研究有没有更多的方法可以在切换时，注销这些监听？以免出现内存泄...
本文实例讲述了AngularJS中控制器函数的定义与使用方法。分享给大家供大家参考，具体如下： HTML正文: <body ng-app="myApp" ng-controller="myCtrl"> <h2>AngularJS函数绑定</h2> <textarea ng-model="message" cols="40" rows="10"></textarea> <p> <button ng-click="save()">保存</button> <button ng-click="clear()">清除</button> </p> <p>剩余字数: <span ng-bind="left()"></span></p> <!-- AngualrJS的显示和隐藏逻辑控制...
当项目变得复杂庞大以后，如果所有页面都在一个模块里，就会出现首页加载慢的问题，因为首页就已经把整个项目加载进来了。所以，很有必要根据业务将不同的功能分模块，以便Angular2按需加载,提升用户体验。 下面的例子是将首页放到home模块里，访问/home时加载home模块内容，仅供学习懒加载，其实首页访问路径应该是/ 先看项目文件结构：home模块放到src/app/home目录下，里面的home目录是home组件。home模块有单独的定义和路由(ho...
Web前端使用Angular实现用户密码强度判别小记 用户密码合法条件： 1、8~16个字符 2、只能包含数字，字母和”_” “.”（即不能含有非法特殊字符） 3、数字，字母和”_” “.” 至少包含两种 实现过程： 长度检测-注：要区分中文和英文，中文两个字节，英文一个字节，在密码输入的时候是不能输入中文，但在检测用户名的使用，就需要区分中英文 // 获取字符串长度：中文也可正常获取 function GetStrLength(strData) {if(!strData){r...
一、项目简介 我们将采用Angular框架来做一个demo，这个demo将要实现的功能如下：在X坐标和Y坐标文本框输入信息，然后点击添加，就会在下面表格 中出现一项相应的数据，点击每一项旁边的删除按钮，该条信息就会被删除！ 因为我们的表格数据是经常刷新的，所以我们把它独立出来作为一个组件。 二、项目目录 --------app ----------dataTable(文件夹) ------------dataTable.component.html ------------dataTable.component.css ---...
1.问题描述：通过Origin是http://localhost:4200请求http://localhost:8081的服务，控制台报错如下，但是Response为200。客户端和服务端IP相同，但是端口不同，存在跨域问题。代码如下: XMLHttpRequest cannot load http://localhost:8081/api/v1/staffs. No Access-Control-Allow-Origin header is present on the requested resource. Origin http://localhost:4200 is therefore not allowed access.2.解决方法：在服务端/api/v...
在$apply方法中提到过脏检查，首先apply方法会触发evel方法，当evel方法解析成功后，会去触发digest方法，digest方法会触发watch方法。 (1)$watch简介 在digest执行时，如果watch观察的的value与上一次执行时不一样时，就会被触发。 AngularJS内部的watch实现了页面随model的及时更新。 $watch方法在用的时候主要是手动的监听一个对象，但对象发生变化时触发某个事件。 (2)watch方法用法 $watch(watchFn,watchAction,deepWatch)wat...
1、ng-options指令用途： 在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。当select中一个选项被选择，该选项将会使用ng-model自动绑定到对应数据上。如果你想设一个默认值，可以像这样：$scope.selected = $scope.collection[3]。 1.1 track by的...
一、现象 用户登录时需要记住密码的功能，在前端需要对密码进行加密处理，增加安全性 二解决 1、利用npm(如果没有，先自行安装npm)安装ts-md5 npm install ts-md5 --save-dev2、在使用的页面中导入import { Md5 } from ts-md5/dist/md5;3、使用 Md5.hashStr(str),如： Md5.hashStr("123456")三、总结 发现这个 npm install md5 --save-dev 用不了？有待研究。。。以上所述是本文的全部内容，希望对大家有所帮助，如果大家有任何疑...
AngularJs的angular.extend()方法可以把一个或多个对象中的方法和属性扩展到一个目的对象中，使得这个对象拥有其他对象相同的方法和属性，如下图所示。angular.extends()方法的第一个参数是要被扩展的对象，后面可以传入一个或多个对象。如果想要保存一个对象的状态，除了可以调用angular.copy()方法外，还可以把一个空对象｛｝作为第一个对象传入。但要注意的是，angular.extends()是非递归的，也就是说：如果扩展的属性中有对象，...
一、现象 一个全屏的“走马灯”每项需要添加背景图，在循环标签里需要动态添加行内样式 二、解决 1、首先有一个图片数组，如： export class AppComponent {array = ["url(/assets/images/img1.png)","url(/assets/images/img2.png)"]; }2、模块中添加数据，如： <div nz-carousel-content *ngFor="let item of array" [ngStyle]="{background-image: item }"></div>三、总结 需要继续思考，如果数组中不带有url，只是单纯的图片路...
最近在用Angular2，需要有一个上传文件的功能，但是又不想用库，所以直接用原生的input file 标签。 <input type="file" id="newUpload" >然后想获取上传的内容，于是先想了个愚蠢的方法，先通过id获取到这个input标签，然后再获取其中上传的内容const uploadsFile = document.getElementById(name).files[0];结果就报错了。然后看提示说HTMLElement没有files方法。于是在es6里找了下有files属性的类型，是HTMLInputElement类型。于...
最近用angular4写项目需要为每次路由跳转增加动画，看了一下官方文档，虽然可以实现，但是要每个组件都引入一次animations，比较麻烦，找网上也查阅了很多资料，但是都没找到适用的方法，最后自己写了一种方法如下： 首先在app.module中导入BrowserAnimationsModuleimport { BrowserAnimationsModule } from @angular/platform-browser/animations;@NgModule({imports: [BrowserAnimationsModule 在根目录src/app/下创建一个animat...
AngularJS的select设置默认值 在使用Angular时候使用select标签时会遇到绑定数据指定默认显示值可这样实现 <!DOCTYPE html> <html ng-app="noteApp" ng-controller="noteCtrl"> <head> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" ...