Angular2 二:Hero Demo 详解

如果没看上一节的话,建议您看一下(点击这里)

接着上一节的问题讲:
输入框名字被修改的时候,标题怎么跟着一块改变?

这个时候要用到Angular里面很重的一个东东:双向数据绑定
用官网的话叫做 Two-Way Binding

1.找到文件  src/app/app.module.ts 并打开编辑
    看一下import 引入模块 有没有引入 FromsModule 这个模块,
    如果没有,通过import 来自己引入一下
    import {FormsModule} from "@angular/forms";
   引入成功之后,在@NgModule 的 imports: 数组中加入该模块(图1)

图1

接下来,修改 src/app/app.component.ts 中的模板 template 的 hero.name 输入框,修改结果如下(图2):

图2

2.好了,现在,我们达到一个效果: 当名字被修改的时候,其他使用的hero.name的地方,也会跟着变化,这也正好体现出来了Angular中双向数据绑定的魅力了:
    界面上input 中 hero.name 发生变化,导致数据中hero.name发生变化,又导致了界面中h2里面hero.name发生了变化
     那么接下来再抛出一个问题:  有没有感觉我们的界面太单调了,界面上只有一个英雄?
    接下来,我们要创建多个英雄,让它们同时都显示到界面上,这也是开发项目时候,最长用的一个list控件的生成方式了
     首先在 src/app/app.component.ts 中通过我们的英雄(Hero)类创建10个英雄,代码如图3所示:

图3

接下来修改数据中的hero和模板的显示方式
如图4所示:

图4

3.代码改好之后,在浏览器的界面上会发现,我们数据中的10个英雄全部到显示到界面上了,但是,好像样式有点单调,没啥意思,接下来,我们就来修改一下样式咯:
@Component 这个东东,不仅可以拥有模板(template)属性,还可以拥有样式(styles)属性:
如下图(图5)所示:
    

图5

好了,为我们的英雄们做点样式,让它们好看一点吧:
样式代码如图6所示:

图6

4.下面,让我们为每一个英雄,添加一个点击事件,要求,英雄点击之后,在上面显示英雄的详细信息:
    首先为每一个英雄所在的li增加点击事件:如图7所示:

图7

然后,在组件中,实现该点击事件:如图8所示:

图8

点击的时候,把点击事件得到的hero 赋值 给了 selectedHero变量

接下来,增加模板内容,显示当前选中的 li 的英雄: 如图9所示:

图9

其中 *ngIf="selectedHero" 的意思就是说:当页面刚加载进来的时候,没有触发点击事件的时候,
selectedHero 变量是没有值的, 当selectedHero 变量没值的手,整个div不显示也不加载,否则会报下面的错 (图10):

图10

意思就是所,selectedHero 是 undefined,所有他没有name属性,
只有当 li 被点击了,selectedHero 才会有值

5.通过下面图6的方式为每一个 li 增加一个 selected class:

图6

[class.xxx]的用法:
<a [class.xxx] = "true"> 代表 该a标签拥有 xxx 这个class
<a [class.xxx] = "false"> 代表 该a标签没有 xxx 这个class

6.当前我们达到的一个效果是这样的:点击某个英雄,让英雄的详细信息在当前界面的上半部分显示,能不能当点击某一个英雄的时候,让英雄的详细信息用另一个新的模板界面显示呢?
答案是肯定的,下一节,我们就来讲一下 多组件的配合使用和传值的问题 (Angular2 三:Hero Demo 多组件模板配合使用)