随笔分类 -  Angular2+

RxJS--Subject
摘要：Subject是Observable(可观察对象)的子类，subject是多播的，允许将值多播给多个observer(观察者)，普通observable是单播。 每一个Subject都是一个Observable(可观察对象)，可以订阅(subscribe)它。 要给subject提供新值，只要调用n 阅读全文
posted @ 2018-11-15 16:08 pei~乐悠悠 阅读(357) 评论(0) 推荐(0)
Angular组件之间通讯
摘要：组件之间会有下列3种关系: 1. 父子关系 2. 兄弟关系 3. 没有直接关系 通常采用下列方式处理(某些方式是框架特有)组件间的通讯,如下: 1父子组件之间的交互(@Input/@Output/模板变量/@ViewChild) 2非父子组件(Service/localStorage) 3还可以利用 阅读全文
posted @ 2018-07-25 17:59 pei~乐悠悠 阅读(594) 评论(0) 推荐(0)
angular2 Router类中的路由跳转navigate
摘要：navigate是Router类的一个方法，主要用来路由跳转。 函数定义 1.this.router.navigate(['user', 1]); 以根路由为起点跳转 2.this.router.navigate(['user', 1],{relativeTo: route}); 默认值为根路由，设 阅读全文
posted @ 2018-03-09 11:40 pei~乐悠悠 阅读(709) 评论(0) 推荐(0)
Angular2-管道
摘要：Angular2中文官网：https://www.angular.cn/guide/quickstart Angular2中的管道@Pipe即是模板中对数据的变换机制，作用和AngularJS中的过滤器filter一样 Angular2内置管道，以及Angular官方的介绍 DecimalPipe: 阅读全文
posted @ 2018-02-07 11:02 pei~乐悠悠 阅读(1027) 评论(0) 推荐(0)
Angular4 @HostBinding @HostListener
摘要：host属性 @Component({ selector: 'jhi-project', templateUrl: './project.html', styleUrls: [], host: { '(window:keydown)': 'keyboardInput($event)' } //绑定事 阅读全文
posted @ 2017-12-12 12:31 pei~乐悠悠 阅读(877) 评论(0) 推荐(0)
Angular2 Router路由相关
摘要：路由设置 Angular中路由的配置应该按照先具体路由到通用路由的设置，因为Angular使用先匹配者优先的原则。 示例: 路由设置如下： 在report页面，点击其上的创建按钮想要进入report-new页面，然而却报下面的错误： 原来路由先匹配到了report/:id这个路由，它把report- 阅读全文
posted @ 2017-12-08 14:34 pei~乐悠悠 阅读(900) 评论(1) 推荐(0)
Angular Reactive Form - 填充表单模型
摘要：setValue 使用setValue，可以通过传递其属性与FormGroup后面的表单模型完全匹配的数据对象来一次分配每个表单控件值。 在分配任何表单控件值之前，setValue方法会彻底检查数据对象。 它不会接受与FormGroup结构不匹配的数据对象，或者缺少组中任何控件的值。 这样，如果您有 阅读全文
posted @ 2017-12-05 20:03 pei~乐悠悠 阅读(712) 评论(0) 推荐(0)
Angular Reactive Form-响应式表单验证
摘要：内建验证规则 Angular中提供了一些內建的Validators，这些验证规则可以在Template-Driven或Reactive表单中使用。 目前 Angular 支持的内建 validators 如下： required - 设置表单控件值是非空的。 email - 设置表单控件值的格式是 阅读全文
posted @ 2017-12-05 16:42 pei~乐悠悠 阅读(1778) 评论(1) 推荐(0)
Template-Driven Forms 模板驱动式表单
摘要：Angular 4.x 中有两种表单： Template-Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 ) Reactive Forms - 响应式表单 Template-Driven Forms - 模板驱动式表单 (类似于 AngularJS 1. 阅读全文
posted @ 2017-11-29 18:39 pei~乐悠悠 阅读(774) 评论(0) 推荐(0)
Angular Reactive Forms -- Model-Driven Forms响应式表单
摘要：Angular 4.x 中有两种表单： Template-Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 ) 官方文档：https://v2.angular.cn/docs/ts/latest/guide/forms.html Reactive Form 阅读全文
posted @ 2017-11-29 18:09 pei~乐悠悠 阅读(713) 评论(0) 推荐(0)
Angular2 constructor VS ngOnInit
摘要：constructor和ngOnInit钩子有什么不同？ constructor constructor（构造函数）是ES6类或TypeScript类中的特殊方法，而不是Angular的方法，主要用来做初始化操作，在进行类实例化操作是，会被自动调用。通过constructor方法并不能使我们知道An 阅读全文
posted @ 2017-11-29 17:30 pei~乐悠悠 阅读(972) 评论(0) 推荐(0)
Angular2 -- 生命周期钩子
摘要：组件生命周期钩子 指令和组件的实例有一个生命周期：新建、更新和销毁。每个接口都有唯一的一个钩子方法，它们的名字是由接口名加上 ng前缀构成的。比如，OnInit接口的钩子方法叫做ngOnInit。指令和组件ngOnInit：当Angular初始化完成数据绑定的输入属性后，用来初始化指令或者组件。ng 阅读全文
posted @ 2017-11-28 15:56 pei~乐悠悠 阅读(1060) 评论(0) 推荐(0)
Angular2 *ngFor把数据显示在多个input中出错解决方法
摘要：点击添加按钮会自动添加一个空的input组 html js 出现的问题是，当我在第一行input中分别添加上数据xxx，ddd后，再次点击添加按钮，此时页面刷新，添加一个空的input行，此时有两行，而第一行input中填好的值却不见了，查看元素它的model属性明明又是绑定了刚输入的值的，页面上怎 阅读全文
posted @ 2017-11-09 12:27 pei~乐悠悠 阅读(2000) 评论(3) 推荐(2)
Angular2 Pipe
摘要：AngularJs 1.x 中使用filters来帮助我们转换templates中的输出，但在Angular2中使用的是pipes，以下展示Angular 1.x and Angular 2中filter和pipe的对比： Basic Pipes 结果： New Pipes decimal和perc 阅读全文
posted @ 2017-11-08 16:24 pei~乐悠悠 阅读(1361) 评论(0) 推荐(0)
Angular4.x Event (DOM事件和自定义事件)
摘要：Angular组件和DOM元素通过事件与外部进行通信，两者中的事件绑定语法是相同的-(eventName)="expression": DOM元素 DOM 元素触发的一些事件通过 DOM 层级结构传播，事件首先由最内层的元素开始，然后传播到外部元素，直到它们到根元素，这种传播过程称为事件冒泡。 DO 阅读全文
posted @ 2017-11-06 12:35 pei~乐悠悠 阅读(24104) 评论(1) 推荐(1)
AngularCLI介绍及配置文件主要参数含义解析
摘要：使用Angular CLI可以快速，简单的搭建一个angular2或angular4项目，是只要掌握几行命令就能构建出前端架构的最佳实践，它本质也是使用了webpack来编译，打包，压缩等构建的事情，适合想用webpack的特性又不想学习webpack那些复杂的配置的开发者； 一、AngularCL 阅读全文
posted @ 2017-10-10 17:08 pei~乐悠悠 阅读(6779) 评论(0) 推荐(0)
Angular2.0知识架构图
摘要：知识架构图： 阅读全文
posted @ 2017-09-19 15:32 pei~乐悠悠 阅读(342) 评论(1) 推荐(1)
Angular4.0--创建类实例
摘要：src/app/hero.ts文件： src/app/app.component.ts文件： 阅读全文
posted @ 2017-09-14 12:29 pei~乐悠悠 阅读(1328) 评论(0) 推荐(0)