Two start
本帖最后由 周大胖子 于 2018-4-19 10:45 编辑2.1如何创建组建：
输入命令：
ng generate component heroes 新建的文件夹位于： src/app/heroes/ @Component({
selector: 'app-heroes', // CSS元素选择器
templateUrl: './heroes.component.html', // 一组模板文件位置
styleUrls: ['./heroes.component.css'] // 一组私有的CSS文件位置
})
2.1.1 添加 属性 例如在 src/app/heroes/heroesComponent.ts 中写明：
hero= 'hahah' 2.1.2 在 src/app/heroes/heroesComponent.html 中：
<h1> {{ hero }} </h1>
2.1.3 显示 app.Component.html 中加入：
<app-heroes></app-heroes>
2.2 创建一个 类在 src/app/hero.ts 中添加一个类并 抛出 备注： 这文件一开始没有，必须自己去建
export class Hero{ id: number; name:string; }
2.3 显示类
在 src/app/heroes/heroes.component.ts中加入
//在下面加入 export class HeroesCompont implements OnInit{ hero: Hero = {id:1, name:'Windstorm' } }//如果页面显示不正常 那是因为 上一个定义hero 的字符串没删
2.4 管道 【格式化工具】
<h2id={{hero.id}} >{{ hero.name }}</h2> //就这种写法
管道：就是内置的项 管道操作符 位于 | 的右边例如 UppercasePipe。 表示大写 有angular的内置管道也可以自己创建
{{ hero.name | uppercase }}
2.5 双向数据绑定
数据流动方向：数据流从组件类流向---> 屏幕---->流回到组件
<input [(ngModel)]="hero.name" placeHolder="name"> //语法 前提： 需要导入双向数据绑定的FormsModule 模块
2.6 如何进行一个模块的导入和安装 例如 FormsModule
打开 AppModule (app.module.ts) 并从 @angular/forms库中导入 FormsModule 符号。
import { HeroesComponent } form './heroes/heroes.component' ;//第一步 向 app.module.ts 中导入 该模块
页:
[1]