1.父组件ts/*** 描述:查询分析* @version:1.0.0* @author: zb* @创建时间: 2017-06-08 15:37:59*/import { Component, OnInit, OnDestroy, ViewChild } from ‘@angular/core‘;import { Router, ActivatedRouteSnapshot, NavigationEnd, RoutesRecognized } from ‘@angular/router‘;import { Http, Headers } from ‘@angular/http‘;import { Observable } from ‘rxjs/Rx‘;import { EventManager, AlertService } from ‘ng-...
Learn how to update part of form model, full form model and reset whole form. We have form definetion like this:reactiveForm: FormGroup;constructor(fb: FormBuilder) {this.extra = new FormControl(‘...‘, [Validators.maxLength(100)]);this.reactiveForm = fb.group({// title <-- formControlName="title" title: [‘Title‘, // <-- Default value [Validators.required,Validators.minLength(3)] //...
Using Radio Buttons in Angular 2 requires a basic understanding of forms as well as how their labels will match up with each input. This lesson shows how to use *ngFor with radio buttons and covers the quirks of the id property and forattributes as well as how to style validation of radio buttons. <!-- Radio button--><form action="" name="myFom4" #myForm4="ngForm"><div *ngFor="let location of loca...
在NiceFish项目中,数据请求处理并没有用Promise的那一套方法,用的是Observable(观察者模式),我将其理解成生产者和消费者模式 如下简单例子:出自(https://segmentfault.com/a/1190000005051034)var observable = Rx.Observable.create(function (observer) {observer.next(1);observer.next(2);observer.next(3);setTimeout(() => {observer.next(4);observer.complete();}, 1000);
});console.log(‘just before subscribe‘);...
这里简单的记录自己在angular2中,使用组件通信的一些方法。方便自己以后的使用。一、组件之间通信的方式使用事件通信(EventEmitter,@Output):场景:可以在父子组件之间进行通信,一般使用在子组件传递消息给父组件;步骤:a. 子组件创建事件EventEmitter对象,使用@output公开出去;b. 父组件监听子组件@output出来的方法,然后处理事件。代码: // child 组件@Component({selector: ‘app-child‘,template: ‘‘,style...
1. 说明典型的模块是一个内聚的代码块,用来实现某种单一的功能。Angular2应用程序本质上是有一系列模块组成的,而且Angular 本身就是一组模块库。模块主要是导出一些东西——类,函数,值,供其它模块导入,然后使用这个类,函数或者值。Angular2 应用是模块化的,并且 Angular2 有自己的模块系统,它被称为 Angular2 模块 或 NgModules。NgModules是带有 @NgModule 装饰器函数的 类 。 @NgModule 接收一个元数据对象,该对象告诉...
第一步:安装Node.js,npm(安装Node.js的时候自动就安装了npm)第二部:安装npm,由于npm官网镜像访问太慢,我们使用淘宝的npm镜像,在node命令窗口(windows的cmd、linux的终端)$ npm install -g cnpm --registry=https://registry.npm.taobao.org第三部:设置淘宝镜像,临时切换npm源为taobao源(速度快一点):npm config set registry https://registry.npm.taobao.org 第四部:安装"@angular/cli脚手架,$npm install --save-de...
Error: ELOOP: too many symbolic links encountered, stat ‘E:\study\angular2\DaMoQiongQiu\routeTemplate\node_modules\.0.1.5@es6-map\node_modules\d\node_modules\es5-ext\node_modules\es6-iterator\node_modules\d\node_modules\es5-ext\node_modules\es6-iterator\node_modules\d\node_modules\es5-ext\node_modules\es6-iterator\node_modules\d\node_modules\es5-ext\node_modules\es6-iterator\node_modules\d\node_m...
refer : https://angular.io/guide/animationshttps://github.com/angular/angular/blob/master/packages/animations/src/animation_metadata.ts https://github.com/angular/angular/commit/f1a9e3c (router) angular 的动画建立在一堆的方法上: 1. trigger 触发器, 用来和 dom 交互 <div [@triggerName]="state" ></div>trigger 负责定义各种 state 和它们之间变化来变化去 transitiontrigger(‘triggerA‘, [ state(‘A‘, st...
最近有时间,学习一下angular2,根据自己的理解添加一些自己的理解,有什么不对的地方请指教,学习的地址是https://angular.cn/下边是分享一下我学习过程angular2和angular1一样,都需要创建跟模块angular1一般默认用app文件作为根模块的创建文件,创建方式如下angular.module(‘app‘, [‘ui.router‘])
中括号内部位自己引用的第三方的一些插件或者服务。angular2也同样需要创建根模块,创建方式发生了一点变化,创建方式如下imp...
NgForm - 表单指令NgForm指令为表单元素/form建立一个控件组对象,作为控件的容器; 而NgControlName指令为则为宿主input元素建立一个控件对象,并将该控件加入到NgForm指令建立的控件组中:局部变量通过使用#符号,我们创建了一个引用控件组对象(注意,不是form元素!)的局部变量f。 这个变量最大的作用是:它的value属性是一个简单的JSON对象,键对应于input元素的 ng-control属性,值对应于input元素的值:声明指令依赖NgForm...
本文将从头开始编写实际的代码来完成一个angular2的demo。题外话是其实angular2官网的快速开始项目已经很酷炫了,但其侧重快速二字,只够拿来练习玩耍,倒是github上确实已经有了一些不错的angular2-starter。 1. 安装必要的node环境与npm当然TS环境也是必须的,目前TS已经更新到了2.1.5+,笔者使用的就是2.1.5版本,且最好使用2.0以上版本的TS,否则会有一些尴尬的问题(包括类型定义以及编译错误)。 2.关于编辑器笔者使用的是VSCo...
第一步:在html模板中,写路由链接,并保证有路由出口 第二步:写自定义的路由指令和路由出口组件,因为在单元测试中不需要引入真实的路由,此处我们用虚拟的代替即可。 第三步:将自定义的虚拟路由指令和路由出口引入测试程序。此处路由相关的测试项被封装到方法 routerTest() 中了。 第四步:路由相关的基础测试 原文:https://www.cnblogs.com/jing5990/p/12371926.html
ng2 路由的概念和游览器类似, 和 ui-router 也类似, 下面会把具体功能逐一解释 1. html5 和 hash # ng2 默认模式是 html5, 在开发阶段我们喜欢使用 hash 模式, 这样可以不用部署服务器.要从 html5 转换成 hash 只要做一个小设定 : 原文:http://www.cnblogs.com/keatkeat/p/5810987.html
解决方法:在 component 中引入 import { DomSanitizer } from "@angular/platform-browser";然后在构造函数中注入 constructor(private sanitizer: DomSanitizer){ }最后将超链接地址url修改为:let url = this.sanitizer.bypassSecurityTrustUrl(url);再将这处理过的 url 放到相应地方,就可以找开了原文:http://www.cnblogs.com/flxy-1028/p/7339752.html