在 Angular 中，对于表单元素，通过 [(ngModel)] 即可以简单地实现双向绑定。对于自定义组件而言，希望实现同样的效果可以怎么做呢？ 1 实现自定义组件的 ngModel 指令如果希望自定义组件能够具有与表单元素相同的 ngModel 效果，可以通过在组件内实现 ControlValueAccessor 接口达到目的。 对于 [(ngModel)] ，需要至少实现该接口的如下方法： interface ControlValueAccessor { writeValue(obj: any): voidregisterOnChange(fn: ...
Angular模板引用变量如果你曾经参与过Angular项目的开发，那么你可能一眼就会看出谁将是本文的主角： <input type="text" [value]="value" #name>若你对此陌生，也无须在意。示例代码的<input>标签的属性中存在一个画风明显与其他属性不同的家伙——#name，这种以一个#开头命名，被附加在DOM元素上的属性，被称为模板引用变量（template reference variables）。 那么何为模板引用变量呢？文档是这样描述的：A template reference ...
1. 引入图标资源在项目index.html文件里添加icon的图标库文件的引用。<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" rel="stylesheet"> 2. 导入MatIconModule如果需要在别的组件同样使用，则需要exports里面引出. 3. icons 资源可以访问material design获取全部icon名称及图标样式信息。 4. 自定义svg图标资源在网上下载svg资源，并将文件保存到项目assets目录里。注册图标资源 ...
上周写课程选择时间功能时需要将课程ID，星期，节次等参数传递给下一个页面，就查了查angularjs的ui-router跨页面传参，一开始是这样写的:在app.js下添加 params:{'args':{}} 然后在起始页面的控制器中使用transtionTo或者go方法传递参数最后在目标页面的控制器使用$stateParams接收参数，如下图，可知我需要传输的参数都传了过来这样传参的好处就是方便灵活，但有一个不好的地方就是每次刷新完以后传递过来的参数都会丢失，是所以...
angular官方文档单例服务的说明单例模式就不要说了，懂点设计模式的都懂得，真有不明白的自行百度。（解释下angular的命名，angular就是angular2+，angular1叫angularjs，至于angular2，3，4，5，6只是angular的版本，通称angular，希望小伙伴不要叫错了）单例模式如何在angular的服务中使用呢，angular的官方文档中有这么一段话： 单例服务服务在每个注入器的范围内是单例的。 在任何一个注入器中，最多只会有同一个服务的一个实例...
我试图在元素上编程点击点击事件(或任何其他事件),换句话说,我想知道在angular2中由jQuery .trigger()方法提供的类似功能. 有没有内置的方法来做到这一点？ …..如果不是,请建议我该怎么做 考虑以下代码片段 <form [ngFormModel]="imgUploadFrm"(ngSubmit)="onSubmit(imgUploadFrm)"><br><div class="input-field"><input type="file" id="imgFile" (click)="onChange($event)" ></div><button id="btnAdd" type="submit" (click)=...
很久没写过angular2.x ，最近一次也是几个月之前，为了下次查阅方便，相关命令记录下 1.ng --version 检查下自己angular cli版本顺便看看npm -v node -v E:\phpStudy\PHPTutorial\WWW>ng --version_ _ ____ _ ___/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|/ △ \ | _ \ / _` | | | | |/ _` | __| | | | | | |/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,...
本文介绍了详解Angular5/Angular6项目如何添加热更新(HMR)功能，分享给大家，具体如下： A：什么是HMR？Q：HMR（热替换）用于在运行的应用程序中更新代码而不需要重建它。这将导致更快的更新和更少的全页重新加载。 angular6-hmr 提供angular6以上HMR(热更新)功能 步骤1、进入angular项目父级目录内 git clone https://github.com/staven630/angular6-hmrangular6-hmr目录与angular项目(例如：my-app)是同级关系 2、执行gulp hmr -...
如下所示： //自定义指令 "myEmail"grgApp.directive("myEmail",function(){ return{ restrict:AE, scope:{toDir:@, fromName:@, sendEmail:& }, templateUrl:/htmls/main/html/custom/email.html,} });//控制器中的方法$scope.send=function(msg){ alert("send email! msg: "+msg);}//email.html<div style="width: 100%;height: 100%;color: white;font-size: 0.8rem;"> <label style="width: 100%;height: 15%;" ng-bind="to...
$watch简单使用 $watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。 $watch(watchExpression, listener, objectEquality);每个参数的说明如下： watchExpression：监听的对象，它可以是一个angular表达式如name,或函数如function(){return $scope.name}。 listener：当watchExpression变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用) objectEqu...
Angular组件和DOM元素通过事件与外部进行通信，两者中的事件绑定语法是相同的-(eventName)="expression": <button (click)="onClick()">Click</button>DOM元素 DOM 元素触发的一些事件通过 DOM 层级结构传播，事件首先由最内层的元素开始，然后传播到外部元素，直到它们到根元素，这种传播过程称为事件冒泡。 DOM事件冒泡与Angular可以无缝工作，具体示例如下： import { Component } from @angular/core;@Component({selector: ex...
子路由学习笔记： 子路由和路由一样的配置方法，都是声明好路由的入口，路由的路径，路由的出口，不一样的是自路由是嵌套在副路由里面的并且由children表明这是子路由且可以无限循环嵌套。 路由入口：需要注意的是在子路由的入口处不能再用/来跟路径名，/会告诉angular去找跟组件，就会找到跟组件对应的模块，子路由需要用./ 1.设置根路由入口：在模板（html）上设置，路由入口就是点击哪里开始路由到新组件（点击首页到首页去） <...
有的时候在回调里面写了更新scope的里面的内容，视图上面竟然没有同时更新，这就用到了$apply Scope的特性 接下来，看看Scope有哪些特性呢？ Scope提供$watch方法监视Model的变化。 Scope提供$apply方法传播Model的变化。 Scope可以继承，用来隔离不同的application components和属性访问权限。 Scope为Expressions的计算提供上下文。 最简单的使用方法，就是在需要传递变化的地方写上以下代码 $scope.$apply();即可完美解决问题！...
前言 作为angularJS框架MVC中M和V的桥梁，controller在整个angularJS的web应用中有着举足轻重的作用。 通常我们可以使用单例service的方式在不同的controller里面共享数据。比如在controller1中通过点击事件修改了service里面的值，controller2中再通过点击事件去获取service中被修改的值，即实现了一个值的传递。但是，如果在controller2中没有设置点击事件，如何实现当controller1中修改了值后，controller2自动去获取新值呢？ 比...
AngularJS中的controller是个函数，用来向视图的作用域（$scope）添加额外的功能，我们用它来给作用域对象设置初始状态，并添加自定义行为。 当我们在创建新的控制器时，angularJS会帮我们生成并传递一个新的$scope对象给这个controller,在angularJS应用的中的任何一个部分，都有父级作用域的存在，顶级就是ng-app所在的层级，它的父级作用域就是$rootScope。 每个$scope的$root指向$rootScope, $cope.$parent指向父级作用域。 cot...