指令是对HTML进行扩展的基本手段 三种指令(注:组件也是一种指令): 组件:一种带有模板的指令;使用component来装饰组件类 属性指令:改变元素的外观或行为,如NgClass,NgStyle;...使用Directive来装饰指令类 结构指令:向DOM中添加或删除元素,如NgIf,NgFor;使用Directive来装饰指令类 绑定字段 {{username}} ngif和ngfor *ngIf
创建组件需要三步: 1.从 @angular/core 引入 Component 装饰器 2.创建一个类,并用 @Component 修饰 3.在 @Component 中 ,设置selector、template...styleUrls(模版样式地址): css样式,在组件模版中引用的css样式。 ---- sivona
前言 最近需要在Angualr2建的项目里做一个pdf显示的功能,在网上找了个插件,不过由于是第一次使用额外插件,在用的时候遇到了一些坑,这里权且记一下使用的步骤,方便以后的参考。...因此在项目根目录下输入下面命令: npm install pdfjs-dist --save npm install ng2-pdf-viewer --save 于此同时,我们还要在system.config.js...', defaultExtension: 'js' }, 'pdfjs-dist': { defaultExtension: 'js' } } 这样我们才能正确的引用这个包。...注册主配置文件 要使用他,我们还要在app.module.ts文件里注册这个包,才能在其他文件里使用,一个最简单的配置如下: import { NgModule } from '@angular/core...页面配置 在模板页面中,只要在适当的位置添加类似下面的标签: <pdf-viewer [src]="pdfSrc" [page]="page"
ERROR in Cannot use 'in' operator to search for 'providers' in null 出现这个问题的原因是,在使用懒加载的时候,没有指定module,
{minFractionDigits}-{maxFractionDigits} minIntegerDigits是要使用的最小数字的整数数字。
首先创建服务器: 1.最好使用express,这个库有更多的api,方法:npm install express --save; 2. npm install @types/express --save...; 安装nodemon 可以让服务器自动重启, 方法:npm install nodemon; 在启动服务器的时候用:nodemon build/...js; 这样服务器就算启动完成了. /** *...api/products",(req,res)=>{ res.json(products) }) app.get("/api/products/:id",(req,res)=>{ //在命令行中打印...}) } } dataSource:Observable 将获得的数据保存为流.对应 的需要引入Observable from "rxjs" http服务已经在app.module中引入过了...修改一行 "start": "ng serve --proxy-config proxy.confi.json", 然后启动 要用npm run start; 只要使用这个命令,才能告诉页面,需要到这个地址去拿数据
因此,cookie可以跨越一个域名下的多个网页,但不能跨越多个域名使用。 ③、不同浏览器对 cookie 的实现也不一样。即保存在一个浏览器中的 cookie 到另外一个浏览器是 不能获取的。...,我们可以通过读取 cookie 中的信息,恢复购物车中的物品。...但是在浏览器端,我们可以将数据保存在 cookie 中,然后在另外页面再去获取 cookie 中的数据。 PS:这里要注意 cookie 的时效性,不然会造成获取 cookie 中数据的混乱。...3、怎么使用 cookie? ...比如: document.cookie="name=中文"; //为了防止中文乱码,我们可以使用encodeURIComponent()编码;decodeURIComponent()解码 document.cookie
需求在ts 中需要把时间统一转换成2000-01-02 11:00:56 使用angular2自带通道 DatePipe //app.component.ts import { DatePipe }.../app.component.scss'], //或者在app.module.ts文件中引入 providers:[DatePipe] }) export class AppComponent...this.datepipe.transform(this.date,"yyyy-MM-dd HH:mm:ss"); console.log(this.date); } } 提示不想在component中写就在...module中填写 @NgModule({ declarations: [ AppComponent ], imports: [ HttpModule
2017-08-09 02:46:18 在JavaScript中,arguments对象是比较特别的一个对象,实际上是当前函数的一个内置属性。...Javascrip中每个函数都会有一个Arguments对象实例arguments,它引用着函数的实参,可以用数组下标的方式"[]"引用arguments的元素。...可以通过下面的例子来看一下arguments的具体使用方法 function test(){ if(arguments.length>0){ for(p of arguments){ console.log...function test(){ if(arguments.length>0){ console.log(arguments.callee); } } */ 通过上面的例子可以看到callee的作用,当需要使用递归来处理问题时...function count(a){ if(a==1){ return 1; } return a + arguments.callee(--a);//此处的调用亦可使用
创建Set实例 使用 new 关键字和 Set 构造函数可以创建一个空集合: const s = new Set(); 如果想在创建的同时初始化实例,则可以给 Set 构造函数传入一个可迭代对象,其中需要包含插入到新集合实例中的元素...返回布尔值): const s = new Set(); s.add(1).add(2).add(3); s.has(1); // true 6. delete() delete(): 删除Set实例中某个元素
使用tinymce富文本编辑实现上传图片功能: 第一步:使用jquery.form.js插件; 自己去百度下载这个插件。...第二步:在angular2的目录中引入,如何引入: 在assets中建一个js文件夹,将jquery.form.js引入, 然后到.angular-cli.json 中添加代码 "scripts": [.../node_modules/jquery/dist/jquery.min.js", "...../src/assets/js/jquery.form.js" ], 将jquery.form.js插件引入。...第三步:上传之后后端会返回展示的image 的url,到node_modules/tinymce/plugins/imageupload/plugin.min.js中修改img的src.
dataState.setData(url); return DataEvent.wrap("uploadok", dataState); } 仅供参考 附上一个完整的文档 Angular2...这里主要介绍一下ng2-file-upload的使用。 以下以Mac OS操作系统介绍。 1. 安装 使用npm安装即可。...的packages字段中的最后一行输入: 'ng2-file-upload': { main: 'index.js', defaultExtension: 'js' }...之后便可以在项目中使用了。...使用 在需要用到的模块中引用模块: import { CommonModule } from '@angular/common'; import { FileUploadModule } from
想要实现 Map 转为 Bean 的功能,使用了org.apache.commons.beanutils.BeanUtils.populate(object, map); 期间遇到了一些问题,遂整理了一下...org.apache.commons.beanutils.BeanUtils.populate(bean, map); System.out.println(bean.getId()); } 测试结果发现,bean的id为null,没有实现预想中的...明明我们使用了 lombok 自动给 JavaBean 生成了 getter/setter,难道 lombok 还有猫腻?...解决办法: 1、去掉 Accessors 注解 2、摸索中… 发现了这个 Introspector.findMethod(Class cls, String methodName, int argCount, Class args[]); 能按方法名获取Method对象,那么要自己实现转换逻辑,可以尝试,摸索中… ---- end
准备开发环境 Angular2 通过 npm 发布, 因此推荐使用 node/npm 环境, 要开始使用 Angular2 , 先准备一个目录 learning-angular , 在这个目录中初始化项目...": "0.1.2", "rxjs": "5.0.0-beta.2", "zone.js": "0.5.15" } 保存 package.json 文件, 在命令行中输入 npm install...npm install 使用 es5 开发 Angular2 应用 Angular2 是个客户端框架, 在浏览器中运行, 因此使用 Javascript (es5) 来做开发也是完全可行的。...首先在 HTML 页面中添加 Angular2 的 UMD 版本 js 文件的引用, 代码如下: js...使用 TypeScript 开发 Angular2 应用 虽然完全能够使用 Javascript es5 来开发, 但是这并不是官方推荐的做法, 官方推荐的是 TypeScript , 默认的教程也都是使用
js自带函数和jquery中的append方法相似 insertAdjacentHTML是一个非常酷的DOM方法,我们可以调用任何DOM元素来向页面添加新内容。...这代表我们将HTML添加到容器中的位置。...我们有四种选项可以设置它的位置: beforebegin 在元素之前 afterbegin 在元素的第一个子元素之后 beforeend 在元素的最后一个子元素之后 afterend 在元素之后 下面的示例代码展示了,向列表中添加了一项
使用ng 指令创建一个组件!...component produce 可以直接创建指令并更新app.module.ts; ng g service shared/login ; 可以直接创建服务,保存到shared文件下; 因为刚接触angular2
浅谈与使用js中的原型# 1 什么是原型# “ 每个函数都会创建一个 prototype 属性,这个属性是一个对象,包含应该由特定引用类型的实例 共享的属性和方法。...2 原型的使用# 首先我们使用设计模式中的工厂模式来实现一个Person类,可以通过new这个Person的函数来创建一个与之具有相同属性的实例,也就省的我们再次创建Person函数了。...person2 = new Person('Greg', 27, 'Doctor') person1.sayName() // Nicholas person2.sayName() // Greg 从上面代码中可以看到...有,那就是用原型,请看下面这份代码: // 工厂模式实现 方法2 使用原型属性 function Person(name, age, job) { this.name = name this.age...3 小结# 本文仅是对于原型有个简单的认识也使用,原型在js中是一个比较重要的模块,还有__proto__ 、 原型链 这些概念没有讲到,如果感兴趣,可以再通过书籍及视频来交叉理解。
js中if语句的使用 if 语句是使用最频繁的语句之一,语法如下: if (condition) { statement1 } else { statement2 } 1、条件(condition...这里的语句可能是一行代码,也可能是一个代码块(即包含在一对花括号中的多行代码)如下列代码: if (xhs > 1) { console.log('xhs满足大于1!')...可以像这样连续使用多个 if 语句: if (condition1) { statement1 } else if (condition2) { statement2 } else { statement3...满足大于25') } else if (xhs < 0) { console.log('xhs满足小于0') } else { console.log('xhs在0到25之间') } 以上就是js...中if语句的使用,希望对大家有所帮助。
背景 在JS中并没有原生枚举的实现,可以通过下面几种方法来模拟类似的操作。...直接使用字符串 上代码: function isWeekend(day) { return day === 'Sat' || day === 'Sun' } console.log(isWeekend...使用变量储存枚举值 这次进阶了一下,虽然代码啰嗦了,但是犯错概率会大大降低: const Days = Object.freeze({ Mon: 'Mon', Tue: 'Tue',...Symbol类型 虽然说用变量把枚举值储存起来了,不过只要别人愿意,他完全可以这样做: // 使用字符串时 isWeekend('Sun') // 使用数字时 isWeekend(0) 那我们属于是白封装了...JS定义枚举集合时的优化 可以尝试下列几种方法,只需要写出来枚举的名字,通过几个数组的API进行赋值操作。 但是由于是动态执行的,效率相对来说会降低,不过这通常是不足一提的。
this) } function test3(){ console.log(this) } test3.call(this) //改变了test2的this指针 test2.call(this) } 2.使用
领取专属 10元无门槛券
手把手带您无忧上云