最近在写一个表单,有些输入框只能输入数字,单又不想每次写表单的时候,都要去验证输入的是不是数字, 那么就想到直接限制只能输入数字,通过指令实现 这里需要注意的是,不只更改DOM的值,如果input为数据绑定的值,需要更新绑定值, 所以需要引入NgModel,通过viewToModelUpdate,来更新绑定值 import { Directive } from '@angular/core'; import { NgModel } from '@angular/forms'; // 自定义指令…

1.指令 *ngIf: 判断 isActive 为true时 <user-detail> 生效展示 <user-detail *ngIf="isActive"></user-detail> *ngFor:遍历显示 <div *ngFor="let user of users">{{user.fullName}}</div> ngClass:class为true类名text-success生效 [ngClas…

Input and Output properties 输入属性是一个带有@Input 装饰器的可设置属性,当它通过属性绑定的形式被绑定时,值会"流入"到这个属性. 输出属性是一个带有@Output 装饰器的可观察对象型的属性.此属性几乎总是返回Angular 的Angular 的EventEmitter.当它通过事件绑定的形式被绑定时,值会“流出”这个属性. 你只能通过它的输入和输出属性将其绑定到其它组件. 绑定到 组件自己 本组件的属性绑定到它自己模板上,属性位于 等号(=)的右边…

向div中插入带有html标签的数据   [innerHTML]="item.content"    字符串截取指令                       {{item.description|slice:0:49}} 指定循环次数 *ngFor="let item of sheng|slice:0:2"…

由于那本书版本稍稍有点早,我就跳过学习第二章第三章了(分别是主机规划和虚拟机安装)下图为在自己电脑上安装好的redhat7 4.1 我们来登入 其中第一行是Linux发行商和发行版本(欸,我的这个怎么没有软件等级..for XX), 第二行Linux核心版本,以及硬件等级64位. 第三行账号,第四行密码.(账号可以输入root,无穷权力,但一般就用一般账号就好了.免得删错东西) 第五行xwc是当前用户账号,@后接的是主机名称,~当前所在目录,#提示符. 退出输入 exit 就好了 4.2并使用C…

今天我们要讲的是ng2的Attribute directives.顾名思义,就是操作dom属性的指令.这算是指令的第二课了,因为上节课的components实质也是指令. 例子…

第一节:Angular2 从0到1 (一)第三节:Angular2 从0到1 (三)第四节:Angular2 从0到1 (四) 作者:王芃 wpcfan@gmail.com 第二节:用Form表单做一个登录控件 对于login组件的小改造 在 hello-angular\src\app\login\login.component.ts 中更改其模板为下面的样子 import { Component, OnInit } from '@angular/core'; @Component({ sele…

1 什么是HTML HTML文档就是一个纯文本文件,该文件包含了HTML元素.CSS样式以及JavaScript代码:HTML元素是由标签呈现,浏览器会为每个标签创建带有属性的DOM对象,浏览器通过渲染这些DOM节点来呈现内容,用户在浏览器中看到的内容就是浏览器渲染DOM对象后的结果. 2 指令的分类 组件.属性指令.结构性指令 具体的知识点请参见<Angular2揭秘> 3 指定义指令常用到的一些常量 3.1 Directive 用于装饰控制器类来指明该控制器类是一个自定义指令控制器类 3.…

在NiceFish项目中关于Echarts组件和指令是直接注册在appModule根模块中的,这样路由只需这样写就可以让浏览器加载图标组件: 在chart组件视图中: <div class="row" [@fadeIn]> <div class="col-sm-12"> <echart [chartType]="pieChart" class="nf-chart"></echart&g…

AngularJS 2 快速入门 npm是什么?   npm其实是Node.js Package Manager的简称,是Node.js包管理工具(package manager) 安装Node.js之后配置npm: 配置npm的全局模块的存放路径以及cache的路径: 查看全局模块路径:npm config get prefix 查看全局cache路径:npm config get cache 在NodeJs下建立"node_global"及"node_cache"…