Angular: Heroes

发表于 | 更新于 | 分类于 | 阅读次数：
本文字数： 1.4k | 阅读时长 ≈ 1 分钟

这是 Angular官网 提供的一个项目教程。

设计

主要包含3个页面：

  1. Dashboard
  2. Heroes List
  3. Hero Detail

准备项目

创建项目

ng new angular-tour-of-heroes

启动应用服务器

ng serve --open

修改标题

  1. 在app.component.ts（用typescript编写），修改title值
  2. 在app.component.html中修改标题：<h1>Angular: Heroes</h1>

修改后保存即可，浏览器自动刷新

添加样式

在src/style.css中修改全局样式

英雄

创建组件

ng generate component heroes

  • 创建了src/app/heroes文件夹
  • 在该文件夹下创建了html/ts/css等文件

添加hero属性并显示

  1. 在heroes.component.ts中的HeroesComponent.ts类中添加hero属性；
  2. 在heroes.component.html中显示<h2></h2>

显示HeroComponent

把<app-heroes></app-heroes>添加进app.component.html中即可

创建hero类

  • 在src/app目录下新建hero.ts文件，定义并exportHero类
  • 再修改heroes.component.ts中hero属性，使其成为Hero类的一个实例
  • 并在hero.component.html中修改显示hero的HTML代码
  • 利用管道进行格式化

name的可编辑

  • 需要将name双向绑定：<input [(ngmodule)]="hero.name" placeholder="name">
  • 需要在项目中导入FormModule

英雄列表

  1. 在src/app下创建一个模拟英雄列表的文件mock-heroes.ts，并在heroes.component.ts中引入
  2. 在heroes.component.html中用*ngFor去循环显示英雄列表
  3. 在heroes.component.css中定义css文件
  4. 在heroes.component.html中用(click)="onSelect(hero)"来定义单击事件
  5. 在heroes.component.html中用*ngIf来显示/隐藏HTML代码
  6. 在heroes.component.html中用[class.selected]="selectedHero === hero"来控制是否添加 select类

英雄和英雄列表页面拆分

  1. 创建英雄详情组件：ng generate component hero-detail
  2. 将关于英雄详情的HTML代码挪动至： hero-detail.component.html
  3. 在heroes.component.html中添加hero-detail组件并绑定selected数据<app-hero-detail [hero]="seletecHero"></app-hero-detail>
  4. 在hero-detail.component.ts中用@Input() hero: Hero;声明hero为绑定的外部数据
0%