您的位置：首页 > 其它

Augular2英雄指南教程

2017-01-14 16:46 211 查看
让表单输入支持双向数据绑定之前，我们得先导入
FormsModule
模块。
只要把它添加到
NgModule
装饰器的
imports
数组中就可以了，该数组是应用中用到的外部模块列表。
这样我们就引入了表单包，其中包含了
ngModel


在app.module.ts


import{
FormsModule}
from'@angular/forms';




@NgModule({


imports:[


BrowserModule,


FormsModule


把
<input>
替换为下列 HTML

COPY CODE
<input [(ngModel)]="hero.name" placeholder="name">


我们来盘点一下已经构建完成的部分。我们的《英雄指南》使用双大括号插值表达式(单向数据绑定的一种形式)来显示应用的标题和
Hero
对象的属性。
我们使用 ES2015 的模板字符串写了一个多行模板，使我们的模板更具可读性。
为了同时显示和修改英雄的名字，我们还使用了内置的
ngModel
指令，往
<input>
元素上添加了双向数据绑定。
ngModel
指令将这些修改传播到每一个对
hero.name
的其它绑定。

<li *ngFor="let hero of heroes">


ngFor
的
*
前缀表示
<li>
及其子元素组成了一个主控模板。

ngFor
指令在
AppComponent.heroes
属性返回的
heroes
数组上迭代，并输出此模板的实例。

引号中赋值给
ngFor
的那段文本表示“从
heroes
数组中取出每个英雄，存入一个局部的
hero
变量，并让它在相应的模板实例中可用”。

hero
前的
let
关键字表示
hero
是一个模板输入变量。
在模板中，我们可以引用这个变量来访问一位英雄的属性。

添加样式：
在
@Component
装饰器的
styles
属性设置CSS
类

这里有很多种样式！我们可以像上面那样把它们内联在组件中，或者把样式移到单独的文件中， 这样能让编写组件变得更容易。我们会后面的章节中使用独立样式文件，现在我们先不管它。

当我们为一个组件指定样式时，它们的作用域将仅限于该组件。 上面的例子中，这些样式只会作用于
AppComponent
组件，而不会“泄露”到外部 HTML 中。

例如：
styles: [`	//`是反引导语法
.selected {
background-color: #CFD8DC !important;
color: white;
}
.heroes {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 15em;
}`]	//反引号语法来书写多行字符串

主从结构：
点击事件
我们往
<li>
元素上插入一句 Angular 事件绑定代码，绑定到它的点击事件。
app.component.ts (template excerpt)
COPY CODE
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">

<span class="badge">{{hero.id}}</span> {{hero.name}}

</li>

事件绑定详解COPY CODE
(click)="onSelect(hero)"
圆括号标识
<li>
元素上的
click
事件是绑定的目标。 等号右边的表达式调用
AppComponent
的
onSelect()
方法，并把模板输入变量
hero
作为参数传进去。 它是我们前面在
ngFor
中定义的那个
hero
变量。在AppComponent中加入
selectedHero: Hero;
我们决定在用户选取之前，不会默认选择任何英雄，所以，不用像
hero
一样初始化
selectedHero
变量。现在，添加一个
onSelect
方法，用于将用户点击的英雄赋给
selectedHero
属性。
app.component.ts (onSelect)
COPY CODE
onSelect(hero: Hero): void {

this.selectedHero = hero;

}

我们将把所选英雄的详细信息显示在模板中。目前，它仍然引用之前的
hero
属性。 我们这就修改模板，让它绑定到新的
selectedHero
属性。
app.component.ts (template excerpt)
COPY CODE
<h2>{{selectedHero.name}} details!</h2>

<div><label>id: </label>{{selectedHero.id}}</div>

<div>

<label>name: </label>

<input [(ngModel)]="selectedHero.name" placeholder="name"/>

</div>


命名约定
我们希望一眼就能看出哪些类是组件，哪些文件包含组件。你会注意到，在名叫
app.component.ts
的文件中有一个
AppComponent
组件，在名叫
hero-detail.component.ts
的文件中有一个
HeroDetailComponent
组件。我们的所有组件名都以
Component
结尾。所有组件的文件名都以
.component
结尾。这里我们使用小写中线命名法 （也叫烤串命名法）拼写文件名， 所以不用担心它在服务器或者版本控制系统中出现大小写问题。



app.module.ts

app.module.ts

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航