angular2.x
极地雪狼li
IT行业
展开
-
angular WEB 文件导出,文件下载
1、window.open()打开新页面下载文件window.open(`url`,'_self')优点:最简洁;缺点:当参数错误时,或其它原因导致接口请求失败,这时页面会停留在新打开的页面中,无法监听到接口返回的错误信息,只在页面中直接输出错误,尽量不适用此方法下载文件2、a标签打开新页面下载文件export const exportFile = (url, fileName) => { const link = document.createElement('a..原创 2020-09-27 12:05:41 · 1300 阅读 · 0 评论 -
angular框架下, 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)--- 页面设置100%以后,不同终端的显示问题
在使用angular7.x开发公众号的时候遇到几个问题,特此记录下一、页面底部留白问题现象: 部分有表单的页面,在表单输入内容以后,键盘收缩之后,下方有一定的空白,下方有按钮的时候,按钮位置错位,无法点击提交,必须手动滑动是的页面留白消失后方可提交原因:其实就是设置页面高度为100%后,iOS下显示的兼容问题。解决办法:1. 在meta viewport标签里加属性:vi...原创 2020-03-10 10:09:21 · 919 阅读 · 0 评论 -
Angular刷新当前页面的几种方法(转载)
默认,当收到导航到当前URL的请求,Angular路由器会忽略。<a routerLink="/heroes" routerLinkActive="active">Heroes</a>重复点击同一链接页面不会刷新。从Angular 5.1起提供onSameUrlNavigation属性,支持重新加载路由。@NgModule({ impor...原创 2020-03-09 22:51:48 · 9249 阅读 · 3 评论 -
angular--解决angular图片加载失败问题
基于angular7写的一个指令,在ionic3.x项目在用。因为加载图片超时等原因导致图片显示不出来,需要替换成默认或者指定图片1.err-src.ts import{ Directive,Input } from'@angular/core'; @ Directive({ selector:'[err-src]',// Attribute s...原创 2020-02-20 16:27:39 · 1873 阅读 · 0 评论 -
angular5+动态设置页面标题title
在实际的开发项目当中,经常需要对访问网页的title进行动态配置,就像这样的东东,所以今天来记录下怎么动态配置title一、首先,准备一个 .json的配置文件放置在静态资源assets文件夹下二、把项目的index中的title置空三、由于angular提供了一个title的服务,所以在app.module.ts文件中providers中注入title四、...原创 2019-07-03 12:22:46 · 2012 阅读 · 0 评论 -
angular5导出excel表格
1.首先安装这两个组件npm install xlsx –savenpm install file-saver –save2.在组件中引入依赖import * as FileSaver from 'file-saver';//浏览器读取本地的文件已经保存文件所需要的依赖。import * as XLSX from 'xlsx';//数据导出导入所需要的依赖3.在模板中添加事...原创 2018-12-05 17:34:36 · 1297 阅读 · 4 评论 -
angular4.0中路由传递参数、获取参数
研究ng4的官网,终于找到了我想要的方法。我想要的结果是用‘&’拼接参数传送,这样阅读上是最好的。否则很多‘/’的拼接,容易混淆参数和组件名称。一般我们页面跳转传递参数都是这样的格式:http://angular.io/api?uid=1&username=moon但是在SPA单页应用中却是下面的结果居多【初级视频都是这样敷衍的】http://angular.i...转载 2018-09-06 13:36:59 · 1539 阅读 · 0 评论 -
angular4中父组件如何调用子组件的方法
一、新建一个子组件ng g component child二、子组件中添加要被调用的方法child.component.tsexport class ChildComponent implements OnInit { constructor() { }...转载 2018-04-24 23:26:10 · 1758 阅读 · 0 评论 -
@angular/cli:如何让@angular/cli生成的项目兼容IE9/10/11?
一个恶心的事情是:@angular/cli 生成的项目默认不能很好地支持IE,9/10/11都不行。好消息是:@angular/cli默认生成了polyfill.ts文件,只要简单几个步骤就可以支持了。第一步:用@angular/cli创建项目ng new ie-testcd ie-testng serve打开你的chrome浏览器,访问http://localhost:4200,很顺利地看...转载 2018-04-16 17:28:19 · 1133 阅读 · 0 评论 -
angularjs2.x 密码隐藏显示的实例
angularjs2 ng2 密码隐藏显示代码结合ionic2开发移动端项目,注册页的密码的input一般用password,但是用户输入密码时可能会输入错误,需要显示成text。首先,输入框的类型判断;<ion-input type="{{pwshow?'text':'password'}}" placeholder="输入密码"></ion-input&g...原创 2018-04-16 09:50:03 · 781 阅读 · 0 评论 -
angular4中引入font-awesome字体图标
引入font-awesome(3种方式实现引入你的项目当中)地址:http://fontawesome.dashgame.com/首先安装字体依赖文件npm install --save font-awesome如果使用css在你的项目的style.css中移入font-awesome.css@import '~font-awesome/css/font-awesome.cs...原创 2018-04-13 16:18:36 · 4968 阅读 · 0 评论 -
Angular2.x新人常犯的5个错误
错误 #1:原生hidden属性绑定数据在AngularJS 1中,如果想切换DOM元素的显示状态,估计你会用AngularJS 1内置的指令如:ng-show或者ng-hide:AngularJS 1示例:<div ng-show="showGreeting"> Hello, there!</div>而angular2里,新的模版语法允许你将...原创 2018-04-12 13:45:40 · 554 阅读 · 0 评论 -
angular4.0如何引入外部插件
angular4.0如何引入外部插件1:import方案引入外部插件是项目中非常重要的环节。因为部分插件以js语法写的,而ng4用的是ts语法,所以在引入时需要配置。Step1:引入swiper插件的js文件【css在下面会讲到,先别急】很重要的意见:亲测,如果用【方法二】引入的js导致效果有问题,请用【方法一】再试方法一:在index.html中引入可以用线上的地址,或者是下载到assets文件...转载 2018-04-09 17:32:04 · 1004 阅读 · 0 评论 -
Angular4学习笔记--HTML属性绑定
Css 类绑定<!-- 第一种情况 class 类全部替换 --><div [class]="divClass">CSS 类绑定,[class] 全部替换的例子</div><!-- 第二种情况 替换 class 类的部分属性 --><div [class.a]="isSpcial">CSS 类绑定,[class.sep...原创 2018-03-27 18:04:06 · 1692 阅读 · 0 评论 -
angular4.x学习笔记--指令
指令Angular的指令概念跟AngularJS的指令差不多,最重要的区别在于Angular中的组件继承指令,算是特殊的指令。我们看下用指令的方式去写组件的简单例子:import { Directive,Input,ElementRef } from '@angular/core';@Directive({ selector: 'hello'})export class ...原创 2018-03-27 10:57:15 · 269 阅读 · 0 评论 -
angular4.x学习笔记 --组件以及生命周期
组件自从采用组件化的React大火之后,目前市面上炙手可热的框架全都采用了组件化的理念,Angular当然也不能落后了。可以说,组件化是Angular的核心理念。按Angular在中国的布道者大漠穷秋的话来说,就是:Angular的核心概念是组件,模块化机制NgModule是为组件化服务的,实际上所有其它机制都是围绕组件化而来的。只有从组件化这个角度才能把握Angular的精神内核。...原创 2018-03-27 10:50:07 · 508 阅读 · 0 评论 -
angular4.x学习笔记--模块
模块Angular很重要的概念之一仍然是模块。Angular整个框架就是由很多个模块组成的,而不同的模块需要从不同的地方导入。打开package.json文件,可以看到依赖的angular包可能是这样的:"@angular/common": "^2.3.1","@angular/compiler": "^2.3.1","@angular/core": "^2.3.1","@angu...原创 2018-03-27 10:47:36 · 276 阅读 · 0 评论 -
angular4.x的学习笔记--服务与依赖注入
服务与依赖注入服务是什么概念?可以简单地认为它是一个功能模块,重要在于它是单例对象,并且可以注入到其他的地方使用。依赖注入是来自后端的概念,其实就是自动创建一个实例,省去每次需要手动创建的麻烦。在Angular中定义一个服务很简单,主要在类之前加上@Injectable装饰器的功能。这是最常见的依赖注入方式useClass,其他具体参见这里。import { Inje...原创 2018-03-27 10:54:25 · 1040 阅读 · 0 评论 -
Angular5 Component通信
Angular5是一个非常强大的前端框架,学习曲线较陡,掌握了不同模块(主要指Component)之间的通信机制,就等于掌握了Angular5。下面详尽列举各种通信方式供您参考:一、从Component代码到Template1. 作为Html内容使用场景:页面加载,自动显示title的值,字号为h3。html标签,花括号里面的是模板表达式(template expression):...翻译 2019-06-14 15:04:41 · 526 阅读 · 0 评论 -
Angular2+ 自定义指令@Directive
概述所谓指令就是用于改变一个DOM元素的外观或行为,Angular2+为我们封装了很多的内置指令,项目中也无时无刻不在使用指令,Angular2+中有三类指令结构型指: 通过添加和移除 DOM 元素改变 DOM 布局的指令,例如:NgFor和NgIf属性型指令:改变元素、组件或其它指令的外观和行为的指令,例如:NgClass组件:组件是一个模板指令,相信大家都很熟悉今天我们来讲讲自定...转载 2019-06-14 13:03:25 · 1677 阅读 · 0 评论 -
angular2+ 版本中使用ng-bootstarp模块中的modal模态框
在angular2+ 版本中使用ng-bootstrap模块中的modal模态框中,当使用表单的select以及input的值得改变来出发modal弹出时暴露出的错误如图html页面ts当使用ngModel和(change)或者(ngModelChange)时会报一下错误自己经过尝试也没有好的解决办法,只能变通一下啦解决办法:首先不用ngModel,改用valu...原创 2019-04-22 10:55:13 · 819 阅读 · 0 评论 -
angular 生命周期钩子函数
生命周期执行顺序1.ngOnChanges在有输入属性的情况下才会调用,该方法接受当前和上一属性值的SimpleChanges对象。如果有输入属性,会在ngOnInit之前调用。2.ngOnInit在组件初始化的时候调用,只调用一次,在第一次调用ngOnChanges之后调用3.ngDoCheck在组件定义的属性或方法变更时调用(用于脏值检测,非常耗性能,因为会把所有的属性和方...原创 2019-02-15 10:24:57 · 900 阅读 · 0 评论 -
angular6傻瓜式入门教程
文章目录1 基础语法1.01.1 ngFor 和 事件1.1 事件传参1.1 获取dom元素1.2 ngIf1.3 父组件往子组件传值Input1.4 行内样式ngStyle1.5 双向数据绑定ngModel1.6 类1.7 ViewChild实现调用子组件方法1.8 组件内容嵌入1.9 事件参数1.10 使用表单指令1.11 内置管道(过滤器)1.12 自定义管道...转载 2018-11-28 23:29:10 · 833 阅读 · 0 评论 -
Angular中的 @angular/material因版本不同产生的系列问题
1 问题描述 应用使用 angular4在使用@angular/material时,若果在导入模块时使用mat开头,就会报错。2 问题原因 @angular/material版本出现问题,@angular/material 从版本5开始就必须要angular5的核心依赖;想要在angular5之前版本中的应用中使用@angular/material,要么更改@angular/mat...转载 2020-03-11 15:41:27 · 1661 阅读 · 0 评论 -
angularjs手机webapp 利用input拍照,图库选择、缩略图显示 上传图片(一)
运行后的截图:html代码<ul class="list_img"> <li ng-repeat="imageSrc in imgshows track by $index"> <img ng-src="{{imageSrc}}" alt=""> ...原创 2018-08-30 15:17:50 · 821 阅读 · 0 评论 -
Angularjs 实现多图片上传预览
先看效果图图片上传的预览,我们最主要解决的是拿到input的on-change事件,再是读取图片,读取图片我们需要用到FileReader。我们先写一个读取图片的服务,这是网上的一位大神写的,直接用了/** * 图片上传获取返回的url */function fileReader ($q, $log){ var onLoad = function(reader, de...原创 2018-08-29 15:25:23 · 1231 阅读 · 2 评论 -
angular限制字符超过一定的字数隐藏字数显示省略号
自定义一个过滤器js代码function CarouselContentFilter ( ) { return function (str) { if(str){ var carContent = ''; if(str.length >= 50){ str.length = 5...原创 2018-08-27 11:12:18 · 5388 阅读 · 0 评论 -
基于angularjs1.x的自定义滚动条插件
在用angular1.x作为项目的前台开发框架时,无法避免的会遇到需要在项目里使用第三方插件的情况(比如用来绘制表格或统计图),有时候插件的功能并不能满足我们的需要(比如绘制表格和绘图插件不包含滚动条,而表格或图形的数据比较多,我们希望用滚动条的方式来展示),需要我们自己来扩展,下面就用一个自定义滚动条插件来抛砖引玉。首先说明一下应用场景:页面有一个固定区域(高度和宽度固定,除窗口大小发生...原创 2018-08-11 11:20:16 · 469 阅读 · 0 评论 -
angular1.x ui-route传参的三种写法
.state('classrooms',{ url: '/classrooms/:id'}).state('classrooms',{ url: '/classrooms/{id}'}).state('activities',{ url: '/activities', params: { id: { value: 42} }})...原创 2018-08-04 11:17:38 · 434 阅读 · 0 评论 -
ionic开发——完整搜索功能的实现方法
在angularjs中,我们的列表基本都是遍历的一个对象数组来显示出来的,那么我们的搜索功能也就在这个基础上来实现。那就假设我们有一个事先显示的对象数组ItemArr1=[];然后有一个输入关键字搜索后要显示的另一个对象数组ItemArr2=[];HTML代码如下:<ion-list> <ion-item class="item-inp...原创 2018-07-26 15:27:03 · 1491 阅读 · 0 评论 -
Angularjs实现分页和分页算法
页面展示效果:页面HTML代码:<table class="table table-striped" style="margin: 0px;"> <thead> <tr> <td>选择</td> <td>企业名称&am转载 2018-07-21 14:31:39 · 901 阅读 · 0 评论 -
AngularJS分页显示的简单案例
由于我下载的anjularJs是1.3的,所以有些代码会和1.5以及之后的有些不同.虽然代码可能不同,但是分页思想还是差不多的.<body ng-app="myApp" ng-controller="myController"> <table class="table table-bordered"> <tr> ..转载 2018-07-21 13:37:33 · 306 阅读 · 0 评论 -
AngularJS 文件上传控件 ng-file-upload带进度条
由于项目需要显示上传文件的进度条,而我们的项目前台用的是AngularJS 所以就在网上找了一个有关AngularJS上传的控件ng-file-upload:https://github.com/danialfarid/ng-file-upload 这个为文件下载地址<!DOCTYPE html><html ng-app="app"><head>...原创 2018-07-20 10:26:01 · 4032 阅读 · 0 评论 -
angular ng-file-upload文件图片上传
资源地址 : https://github.com/danialfarid/ng-file-upload<script src="angular(.min).js"></script><script src="ng-file-upload-shim(.min).js"></script> <!-- for no html5 browse转载 2018-07-20 10:21:22 · 2970 阅读 · 0 评论 -
angularjs 上传照片 电脑选取照片 并且预览
html 中代码: <input type="file" file-Model="myFile" /> <div class="col-md-12"> <img ng-src="{{imageSrc}}" style="width:300px;height:300px;" /> <转载 2018-07-19 14:09:21 · 583 阅读 · 0 评论 -
Angular系列学习笔记(二)—— 基于gulp构建Angular单页面应用
前言构建打包工具之前一直是使用 webpack(歪脖帕克,毕竟尤大推荐的工具),由于公司这边是使用gulp,为了和公司同步,私下还是要学习学习,毕竟懂点万一需要和老大交流也不至于说有啥问题,这篇文章将会以零基础的角度去写一下基于gulp搭建angular的工程,借这个机会顺便重构一下自己的博客。gulp基础入门在开工之前确保自己已经安装了node环境,没有安装的自行安装好node,安装的时候默认会...转载 2018-07-11 21:23:44 · 844 阅读 · 0 评论 -
Angular 1项目构建心得(一)
目录结构如下:目录结构注意:用运了gulp前端构建工具,将src原始路径下的代码,重新构建到build文件夹下面。(一)项目的目录结构和技术架构。 拿到项目后首先要搭起目录结构和技术架构,我用了angular+gulp+bootstrap构建项目,angular框架用于前后端分离和系统模块化,gulp用于压缩,生成版本号和ES6的编译等。项目的目录结构也是先以功能划分模快,然后根据ang...转载 2018-07-11 20:37:44 · 2781 阅读 · 0 评论 -
ionic实战系列(一):ionic的开发环境配置和编译、发布
1.1技术栈模型 Ionic的工作原理是通过cordova把一个Web应用嵌入原生应用。以下两张图介绍了Ionic的技术栈模型和Hybrid应用和其它类型的应用的区别,一目了然。 ionic技术栈模型比较原生应用、移动端网站和Hybrid应用的架构原生应用ios使用Objective-C,或者Sw...转载 2018-07-06 10:04:18 · 1164 阅读 · 0 评论 -
Ionic开发 (性能很差吗?也许这些优化手段你没用过)
一提起Ionic开发混合应用(Hybrid App),首先周围群众的反应是性能很差,不推荐使用。细问哪些方面的性能差呢?回曰:IOS可以,Android平台上,页面切换的时候性能很差,有明显卡顿的感觉,真的是这样吗?如果这种说法放在一年前或许成立,但随着Android4.4版本之后,ionic和angular.js 的不更新进步,以及最重要的手机硬件内存、CPU的升级,Ionic开发的混合应用,性...转载 2018-07-05 15:18:48 · 5318 阅读 · 0 评论 -
关于ionic开发中遇到的坑与总结
这次是第二次使用ionic开发混合app,今天算是对这个框架做一个总结,基础的我就不再重复了,网上都有教程。我就说说自己的心得和遇见的各种坑, 之后会陆续补充,想到什么说什么吧。1.关于ionic效率的问题,这个是我最关心的问题,毕竟用户体验才是第一位啊。a)Native transitions这个是一个cordova插件,主要是让页面间的切换更贴近原生,可以通过命令行安装。 cnpm insta...转载 2018-06-13 09:03:58 · 1080 阅读 · 0 评论