Two start

周大胖子

2.1如何创建组建：
   输入命令：

1. ng generate component heroes

复制代码

   新建的文件夹位于： src/app/heroes/

1. @Component({
2.   selector: 'app-heroes',    // CSS元素选择器
3.   templateUrl: './heroes.component.html', // 一组模板文件位置
4.   styleUrls: ['./heroes.component.css'] // 一组私有的CSS文件位置
5. })

复制代码

    2.1.1 添加 属性   例如在 src/app/heroes/heroesComponent.ts 中写明：

1. hero= 'hahah'

复制代码

   2.1.2 在 src/app/heroes/heroesComponent.html 中：

1. <h1> {{ hero }} </h1>

复制代码

   2.1.3 显示   app.Component.html 中加入：

1. <app-heroes></app-heroes>

复制代码

2.2 创建一个 类  在 src/app/hero.ts 中添加一个类并 抛出 备注： 这文件一开始没有，必须自己去建

1. export class Hero{    id: number;   name:string; }

复制代码

2.3 显示类
在 src/app/heroes/heroes.component.ts中加入

1. //在下面加入 export class HeroesCompont implements OnInit{   hero: Hero = {  id:1,   name:'Windstorm' }   }  //如果页面显示不正常 那是因为 上一个定义hero 的字符串没删

复制代码

2.4 管道 【格式化工具】

1. <h2  id={{hero.id}} >{{ hero.name }}  </h2> //就这种写法

复制代码

管道：就是内置的项 管道操作符 位于 | 的右边  例如 UppercasePipe[color=rgba(0, 0, 0, 0.87)]。 表示大写 有angular的内置管道  也可以自己创建

1. {{ hero.name | uppercase }}

复制代码

2.5 双向数据绑定
   数据流动方向：  数据流从组件类流向---> 屏幕  ---->流回到组件

1. <input [(ngModel)]="hero.name" placeHolder="name">    //语法

复制代码

  前提： 需要导入双向数据绑定的  FormsModule 模块


2.6 如何进行一个模块的导入和安装 例如 FormsModule
[color=rgba(0, 0, 0, 0.87)]     打开 AppModule (app.module.ts) 并从 @angular/forms库中导入 FormsModule 符号。

1. import { HeroesComponent } form './heroes/heroes.component' ;  //第一步 向 app.module.ts 中导入 该模块

复制代码