angular
傻小胖
一个正在爬的小胖子
展开
-
angular4路由1(路由传递参数)
1.当页面输入一个存在的地址的时候会报错。这个时候需要设置一个空页面提示用户此页面不存在。这个空页面需要用一个通配符来配置路由导航。注意的是通配符的路由必须放在最后来配置路径,避免一开始查找路径,还未遍历所有路径就已经跳入通配符路由的页面。{path:'',component:HomeComponent},{path:'product',component:ProductComponen原创 2017-07-05 21:33:21 · 8606 阅读 · 0 评论 -
组件间通信 angualr4中间人模式
中间人模式相当于就是同时利用输入输出属性将信息通过两个组件共同的父组件进行组件间通讯,这个共同的父组件就是中间人下面以一个例子来讲述一个报价组件,有个购买组件,他们有一个共同的父组件APPcomponent。那么如何通过点击报价组件上的立即购买按钮够股票呢?思路如下:通过输出属性将报价组件上点击立即购买时的股票代码和股票价格等股票信息传递给父组件APPcomponent,父组件将接原创 2017-09-14 20:06:47 · 2000 阅读 · 1 评论 -
ngFor循环出来的数组,在判断上区别可以自定义一个属性给循环出来的当前数组,供使用
例如:循环出来了一个列表,要求点击不同的项目时,被点击的背景色改变为黄色,字体颜色改变为白色。由于是ngFor循环的所以每一项的类和DOM都是相同的所以很容易造成所有颜色都改变。这个时候给当前的列表定义一个属性:list.classtype就是给list定义了classtype属性。然后在用循环遍历来确定当前点击的,将当前点击的和未点击的区分开来。然后进行样式和事件处理。下面这个例子是对样式的原创 2017-09-25 09:40:42 · 4643 阅读 · 2 评论 -
组件生命周期钩子
直接上代码:然后看钩子的执行顺序:import { AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, Component, DoCheck, Input, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@angular/原创 2017-09-15 23:22:18 · 886 阅读 · 0 评论 -
onChanges钩子使用
该钩子在父组件初始化或者修改子组件的输入参数时被调用首先理解两个概念:1.可变对象:在js中,对象是可变的例如:var user={ name:"jerry";//在对象中创建了一个值为jeery的name对象 } user.name="honny";//给name赋值一个新的值。这个时候并不会个对象name分配新的内存地址。而是在原来的地址上修改了原来原创 2017-09-18 20:47:15 · 4794 阅读 · 0 评论 -
angular4输入属性@input
1.输入属性:从父组件到子组件。当应用启动时,Angular 会从根组件开始启动,并解析整棵组件树,数据由上而下流下下一级子组件。Input 装饰器支持一个可选的参数,用来指定组件绑定属性的名称。如果没有指定,则默认使用 @Input 装饰器,装饰的属性名。具体示例如下:使用装饰的属性名:分三步1、编写子组件组件。ts文件在这里声明变量开接受父组件的传值,并且用@I原创 2017-08-28 23:31:35 · 3860 阅读 · 0 评论 -
angular4输出属性@Output
Output 是属性装饰器,用来定义组件内的输出属性。上篇文章介绍了 Input 装饰器的作用,也了解了当应用启动时,Angular 会从根组件开始启动,并解析整棵组件树,数据由上而下流下下一级子组件。今天介绍的 Output 装饰器,是用来实现子组件将信息通过事件的形式通知到父级组件。输入属性是通过属性绑定实现父组件到子组件的信息传递。输出属性是实现通过事件绑定实现子组件到父组件的信息传原创 2017-09-03 18:21:39 · 2197 阅读 · 0 评论 -
angular2如何识别字符串中的html标签,并按照html来显示视图
这个源于一个需求:从后台拿到用户评论的内容,该内容是字符串的,但是里面包含了html代码。要求显示的时候按照html来显示,不是按照字符串来显示。并且要求任意的段文字添加样式;思路:用属性绑定的方法来innerHTML;将从后台拿到的字符串放在一个变量里面,用属性绑定[innerHTML]="aa",aa为存储字符串的变量任意字符串添加样式:先把预先的样式写在css里面,在评论的时候带原创 2017-10-19 19:46:24 · 9447 阅读 · 2 评论 -
属性绑定的innerHTML和直接纯js的innnerHTML区别
纯js的document.getElementById("htmlcontent").innerHTML = this.htmlcontent;这种方式可以把css样式也按照css标签和html标签插入文本显示然而属性绑定的innnerHTML:[innerHTML]="this.htmlcontent";这种插入方式只能识别html标签,而标签里内嵌的css样式无法识别P原创 2017-12-02 15:16:25 · 1401 阅读 · 0 评论 -
angular2中DomSanitizer的5种用法记录
1.Cross-site scripting (跨站脚本)跨站脚本(Cross-site scripting,通常简称为XSS)是一种网站应用程序的安全漏洞攻击,是代码注入的一种。它允许恶意用户将代码注入到网页上,其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。XSS攻击通常指的是通过利用网页开发时留下的漏洞,通过巧妙的方法注入恶意指令代码到网页原创 2018-01-08 16:08:25 · 9671 阅读 · 0 评论 -
angular4自定义模态弹框
代码记录,便于下次不会:模板:class="alerting"> class="alertContent" ontouchmove="event.preventDefault();event.stopPropagation();"> >内容 class="backdrop-div" (click)="backdro原创 2017-09-22 16:47:32 · 8534 阅读 · 0 评论 -
angular4子路由&辅助路由
子路由学习笔记:子路由和路由一样的配置方法,都是声明好路由的入口,路由的路径,路由的出口,不一样的是自路由是嵌套在副路由里面的并且由children表明这是子路由且可以无限循环嵌套。路由入口:需要注意的是在子路由的入口处不能再用/来跟路径名,/会告诉angular去找跟组件,就会找到跟组件对应的模块,子路由需要用./根路由入口:[routerLink]="['/']">主页[原创 2017-07-06 23:01:00 · 15901 阅读 · 10 评论 -
angular4路由基础运用
1.base href> 元素大多数带路由的应用都要在index.html的标签下先添加一个元素,来告诉路由器该如何合成导航用的URL。如果app文件夹是该应用的根目录(就像我们的范例应用一样),那就把href的值设置为下面这样:src/index.html (base-href)content_copy href="/">2.从路由库中导入An原创 2017-08-14 23:31:25 · 511 阅读 · 0 评论 -
angular2中ngstyle和ngclass的用法
摘自他人处,记录笔记用~1、ngStyle基本用法div [ngStyle]="{'background-color':'green'}">div>判断添加2、ngClass第一个参数为类名称,第二个参数为boolean值,如果为true就添加第一个参数的类基本用法[ngClass]="{'text-success':true}"判断[n转载 2017-07-17 10:51:59 · 4614 阅读 · 0 评论 -
angular路由守卫
路由守卫是指当用户满足了某些要求之后才可以离开或者进入某个页面或者场景的时候使用。比如说只有当用户填写了用户名和密码之后才可以进入首页,比如说用户离开某个页面时明月保存信息提示用户是否保存信息后再离开等操作,控制这些要求的就叫路由守卫。 1.CanActivate 进入路由守卫这种守卫是指用户必须满足某些要求后才可以进入路由。比如注册登录首先建立一个守卫文件guard,在文件里面建一个原创 2017-07-10 22:26:16 · 4232 阅读 · 2 评论 -
angular2响应式表单禁用和只读设置
设置方法:1.设置只读属性为true: readonly="true"ion-input type="text" formControlName="IdCardNo" placeholder="请填写身份证号" readonly="true" >ion-input>2.直接禁用表单项:disabled原创 2017-07-21 14:29:04 · 4180 阅读 · 0 评论 -
angular2开发环境配置和项目目录创建
学习笔记:1.安装node.js下载安装地址Node.js安装包及源码下载地址为:https://nodejs.org/en/download/。安装步骤安装即可没有什么难度2.安装npm终端/控制台窗口中运行命令 node -v 和 npm -v, 来验证一下你正在运行 node 6.9.x 和 npm 3.x.x 以上的版本。 更老的版本可能会出现错误,更新的版本则没问原创 2017-07-19 17:29:11 · 869 阅读 · 0 评论 -
angular2指令解读:ngFor,ngIf,ngSwitch,ngStyle,ngClass用法
0.先给组件赋值一个测试数据import {Component} from '@angular/core';@Component({ selector: 'ng-tag', styles: [require('./NgTag.scss')], template: require('NgTag.html')})export class NgTagCompon原创 2017-08-16 11:31:18 · 8084 阅读 · 3 评论 -
angular [ngStyle] [ngClass]的用法
1、ngStyle基本用法div [ngStyle]="{'background-color':'green'}">div>判断添加2、ngClass第一个参数为类名称,第二个参数为boolean值,如果为true就添加第一个参数的类基本用法[ngClass]="{'text-success':true}"判断[ngClass]="{'t转载 2017-07-27 11:20:51 · 2151 阅读 · 0 评论 -
angular2依赖注入概述
学习笔记1.依赖注入要解决的问题在需要一个对象的时候我们通常的方法是现将这个对象实例化,再将实例化后的对象作为一个参数传递给调用对象的函数,但是如果一个函数需要调用多个对象,也就是依赖多个对象的时候,就需要实例化多个对象之后将实例化之后的对象当做参数传递给函数。这样我们就需要实例化大量的对象。能不能有一种方法让我们不用实例化那么多对象,我的函数需要什么参数,就给我什么参数呢?这个时候就产生原创 2017-07-19 19:51:18 · 691 阅读 · 0 评论 -
在angular里面使用jQuery和bootstrap
第一步:1.在你的项目目录下面:npm install jquery --save--save是将jQuery加入package.json里面2.在项目目录下面npm install bootstrap --save安装完成后:"bootstrap": "^3.3.7","core-js": "^2.4.1","jquery": "^3.2.1",第二步原创 2017-08-13 17:57:44 · 5725 阅读 · 3 评论 -
angular2中数据绑定方法总结和管道使用
一.数据绑定方法:1.事件绑定:(DOM事件)= “组件中的处理方法”或者是:on-DOM事件= “组件中的处理方法”举例:绑定用户点击事件 button (click)="onClickMe()">Click me!button>11等效于 on-click="onClickMe()">Click me!原创 2017-08-24 23:18:24 · 704 阅读 · 0 评论 -
angular4开发环境搭建以及项目启动过程
1.安装Node.js®和npm,node官网下载安装即可2.请先在终端/控制台窗口中运行命令 node -v 和 npm -v, 来验证一下你正在运行 node 6.9.x 和 npm 3.x.x以上的版本。 更老的版本可能会出现错误,更新的版本则没问题。3.全局安装 Angular CLI 。npm install -g @angular/cli4.ng-v看安原创 2017-08-13 15:46:31 · 13809 阅读 · 8 评论