标签：cto let bsp 大神 import inpu over target type
ng2发布了一段时间，最近才开始着手学习一下，ng2可以说变化海是比较大的，现在写一些学习过程中要注意的点，新手可以参考，大神可以指导：
按照文档来吧：
1、快速开始：没什么可说的，直接上git 克隆官方的quick-start，
git clone https://github.com/angular/quickstart.git quickstart cd quickstart npm install npm start
2、官方的第一个例子：
ngFor循环列表，ng2要定义一个局部变量，还要注意前面的*号：<li *ngFor="let list of listArr">{{list}}</li>;注意下格式就ok了；
3、用户输入：
这个例子个人觉得用到的场景不会太多；
主要是是涉及到input框的的事件绑定以及value的获取方式：
1）、直接绑定事件：(keyup)="keyUpEvent($event)";这里传入了一个$event事件，由于$event是一整个DOM元素事件及属性，所以效率比较低；
2）、angularjs的模版引用变量直接访问input的值；<input (keyup)="uinput2(box2.value)" #box2/>；效率比较高推荐使用；
3）、当input要绑定处理事件的时候，可以1）、2）方法合用。<input type="text" (keyup.enter)="addList(list.value)" #list/>
4、表单：这个用处比较大，主要用到的是数据的双向数据绑定[(ngModel)]="args";
这里有一个坑，就是要完成表单的双向数据绑定需要加载一个angular模块FormsModule，这个模块要在app.module的主模块里引用，并且在@NgModule的imports里加入。这样才能正常工作，不然双向数据绑定不上。应该是双向数据绑定都要引入FormsModule这个模块；至于表单验证在下一次总结在写；
【其他的坑】：
1、定义一个组件时，要引用时都需要在app.module的主模块了进行引入；并且在@NgModule的declarations里声明；
2、ngnice.cn这个angular中文网上的文档，比较坑，基础的绑定等操作在后面，实例在前面，这样容易对新手造成困惑；
下面贴一下代码：
app.module.ts文件：
import { NgModule } from ‘@angular/core‘;
import { BrowserModule } from ‘@angular/platform-browser‘;
import { FormsModule } from ‘@angular/forms‘;
import { AppComponent } from ‘./app.component‘;
import { ClickMeComponent } from ‘./click-me.component‘;
import { UserForm } from ‘./form.component‘;
@NgModule({
imports: [ BrowserModule ,FormsModule],
declarations: [ AppComponent , ClickMeComponent,UserForm,],
bootstrap: [ AppComponent ]
})
export class AppModule { }
用户输入组件的代码：
import { Component } from ‘@angular/core‘;
@Component({
selector:‘user-input‘,
template:`
<h2>用户输入:</h2><hr />
<h4>绑定keyUp事件获取用户输入事件</h4>
<input (keyup)="uinput($event)" />
<p>您输入的信息是：{{msg}}</p>
<br />
<h4>使用 Angular 的模板引用变量</h4>
<input (keyup)="0" #box/><b>（已输入{{box.value.length}}个字，还可以输入：{{10-box.value.length}}个字）</b>
<p>您输入的信息是：{{box.value}}</p>
<br />
<h4>组合使用效率更高</h4>
<input (keyup)="uinput2(box2.value)" #box2/>
<b *ngIf="box2.value.length<=10">（已输入{{box2.value.length}}个字，还可以输入：{{10-box2.value.length}}个字）</b>
<b *ngIf="box2.value.length>10">（超过输入：{{box2.value.length-10}}个字）</b>
<p>您输入的信息是：{{msg2}}</p>
<br />
<h3>实例:</h3>
<div>
<input type="text" (keyup.enter)="addList(list.value)" #list/>
<button (click)="addList(list.value)">添加到列表</button>
<ul>
<li *ngFor="let list of likeList">{{list.call}}</li>
</ul>
</div>
`
})
export class ClickMeComponent {
msg = ‘未输入‘;
uinput(evt){
// 传递整个dom以及事件，性能差
console.log(evt);
this.msg = evt.target.value ? evt.target.value : ‘未输入‘;
}
msg2 = ‘未输入‘;
uinput2(val:string){
if(val.length>10){
this.msg2 = val.substring(0,10) ? val.substring(0,10) : ‘2未输入‘;
}else{
this.msg2 = val ? val : ‘2未输入‘;
}
}
likeList = [
{"id":1000,"call":"读书"}
];
addList(val){
var id = +new Date();
this.likeList.push({"id":id,"call":val});
}
}
FORM表单的数据绑定：
import { Component } from ‘@angular/core‘;
import { Hero } from ‘./hero‘;
@Component({
selector:‘hero-form‘,
template:`
<h2>FORM 表单</h2>
<hr />
<div class="container">
<h4>Hero Form</h4>
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" name="name" [(ngModel)]="model.name" id="name" required>
</div>
<div class="form-group">
<label for="power">Hero Power</label>
<select class="form-control" id="power" [(ngModel)]="model.power" required name="power">
<option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
</select>
</div>
<div class="form-group">
<label for="alterEgo">Alter Ego</label>
<input type="text" class="form-control" [(ngModel)]="model.alterEgo" name="alterEgo" id="alterEgo">
</div>
<button type="button" (click)="submit()" class="btn btn-default">Submit</button>
</form>
</div>
`
})
export class UserForm {
powers = [‘Really Smart‘, ‘Super Flexible‘,
‘Super Hot‘, ‘Weather Changer‘];
model = new Hero(18, ‘Dr IQ‘, this.powers[0], ‘Chuck Overstreet‘);
submitted = false;
//onSubmit() { this.submitted = true; }
submit(){
console.log(this.model)
}
}
以上内容欢迎各位大神批评指导！
标签：cto let bsp 大神 import inpu over target type
原文地址：http://www.cnblogs.com/wwlhome/p/6425524.html
