Angular 1.1 创建组件 并进行数据绑定[单向 双向]

1.创建名为heroes的组件。

运行命令：ng generate component heroes

可以看到新的组件已经创建成功，heroes文件夹中，已有四个文件。

ponent.css 样式文件

ponent.html 页面文件

ponent.spec.ts 单元测试文件

ponent.ts 逻辑文件

这里的逻辑文件中会默认生成一些结构代码，我们看下。

@Component是一个装饰器函数，它指定组件的Angular元数据。

CLI生成了三个元数据属性：

selector- 组件的CSS元素选择器templateUrl- 组件模板文件的位置。styleUrls- 组件的私有CSS样式的位置。

在CSS元素选择器，'app-heroes'是相匹配的标识父组件模板内此组件的HTML元素的名称。

这ngOnInit是一个生命周期的钩子。ngOnInit创建组件后不久就会进行Angular调用。

2.进行单向数据绑定【只读】。

1.首先我们在ponent.html中添加heroes组件。

2.我们在ponent.ts 中添加一个属性heroesName。

3.我们在ponent.html 中添加显示标签<p></p>。

4.我们在ponent.css中，为<p>标签加一个样式吧。

5.运行命令：ng serve --open,效果如下。

3.进行双向数据绑定【可读可写】。

1.这下我们绑定一个对象（类），新创建hero.ts类，进行绑定。

2.我们在ponent.ts中引用hero.ts类，并在初始化的时候给它赋值。

3.我在页面ponent.html进行绑定。

uppercase插值绑定中的单词，在管道运算符（|）之后，激活内置函数UppercasePipe。

管道是格式化字符串，货币金额，日期和其他显示数据的好方法。角船配有多个内置管道，您可以创建自己的管道。

[（ngModel）]是Angular的双向数据绑定语法。

4.虽然[（ngModel）]是有效的Angular指令，但默认情况下不可用，它属于可选项FormsModule，必须选择使用它。

我们打开app.module.ts引用FormsModule。

5.运行命令ng serve --open,效果如下：