在此页面中,您将展开Tour of Heroes应用程序以显示heroes列表,并允许用户选择heroes并显示heroes的详细信息。

 

你需要一些heroes来展示。

最终你会从远程数据服务器获取它们。现在,你会创建一些模拟heroes,并假装他们来自服务器。

创建一个文件夹中调用mock-heroes.tssrc/app/文件。定义一个HEROES由十个heroes组成的数组并将其导出。该文件应该看起来像这样。

  1. //src/app/mock-heroes.ts
  2. import { Hero } from \'./hero\';
  3. export const HEROES: Hero[] = [
  4. { id: 11, name: \'Mr. Nice\' },
  5. { id: 12, name: \'Narco\' },
  6. { id: 13, name: \'Bombasto\' },
  7. { id: 14, name: \'Celeritas\' },
  8. { id: 15, name: \'Magneta\' },
  9. { id: 16, name: \'RubberMan\' },
  10. { id: 17, name: \'Dynama\' },
  11. { id: 18, name: \'Dr IQ\' },
  12. { id: 19, name: \'Magma\' },
  13. { id: 20, name: \'Tornado\' }
  14. ];

View Code

 

6.1-显示hereos

您即将在顶部显示heroes列表HeroesComponent

打开HeroesComponent类文件并导入模拟HEROES

 

  1. src/app/heroes/heroes.component.ts
  2. import { HEROES } from \'../mock-heroes\';

  1. import { Component, OnInit } from \'@angular/core\';
  2. import { HEROES } from \'../mock-heroes\';
  3. import { Hero } from \'../hero\';
  4. @Component({
  5. selector: \'app-heroes\',
  6. templateUrl: \'./heroes.component.html\',
  7. styleUrls: [\'./heroes.component.css\']
  8. })
  9. export class HeroesComponent implements OnInit {
  10. hero: Hero = {
  11. id: 1,
  12. name: \'Windstorm\'
  13. };
  14. heroes = HEROES;
  15. constructor() { }
  16. ngOnInit() {
  17. }
  18. }

View Code

 

6.2-用 * ngFor列出heroes

打开HeroesComponent模板文件并进行以下更改:

  • <h2>在顶部添加一个
  • 在它下面添加一个HTML无序列表(<ul>
  • 插入一个<li><ul>显示的属性hero
  • 为样式添加一些CSS类(您将很快添加CSS样式)。

让它看起来像这样:

  1. <h2>My Heroes</h2>
  2. <ul class="heroes">
  3. <li>
  4. <span class="badge">{{hero.id}}</span> {{hero.name}}
  5. </li>
  6. </ul>

View Code

现在改变<li>

  1. <li *ngFor="let hero of heroes">

 

源码:

  1. <h2>My Heroes</h2>
  2. <ul class="heroes">
  3. <li *ngFor="let hero of heroes">
  4. <span class="badge">{{hero.id}}</span> {{hero.name}}
  5. </li>
  6. </ul>

 

*ngFor是Angular的repeater指令。它重复列表中每个元素的主机元素。

在这个例子中

  • <li> 是主机元素
  • heroesHeroesComponent班上的名单
  • hero 通过列表保存每次迭代的当前heroes对象。

不要忘记前面的星号(*)ngFor这是语法的关键部分

 

 

heroes名单应该是有吸引力的,并且当用户将鼠标悬停在列表中并从中选择heroes时,应该以可视方式作出响应。

第一篇教程中,您将为整个应用程序设置基本样式styles.css该样式表不包含这个heroes列表的样式。

styles.css在添加组件时,您可以添加更多样式并继续增加样式表。

您可能更倾向于为特定组件定义私有样式,并将组件需要的所有内容(代码,HTML和CSS)保存在一个地方。

这种方法使得在其他地方重新使用组件更容易,并且即使全局样式不同,也可以提供组件的预期外观。

您可以在数组中内联定义私有样式,也可以将其定义为阵列中标识的样式表文件@Component.styles@Component.styleUrls

当CLI生成时HeroesComponent,它heroes.component.css为此创建了一个空的样式表,HeroesComponent 并像这样指向它@Component.styleUrls

 

  1. // src / app / heroes / heroes.component.ts(@Component)
  2. @Component({
  3. selector: \'app-heroes\',
  4. templateUrl: \'./heroes.component.html\',
  5. styleUrls: [\'./heroes.component.css\']
  6. })

 

打开该heroes.component.css文件并粘贴私人CSS样式HeroesComponent您可以在本指南底部最终代码审查找到它们

元数据中标识的样式和样式表被限定为特定组件。这些样式仅适用于和不影响任何其他组件中的外部HTML或HTML。

@Componentheroes.component.cssHeroesComponent

 

 

 

当用户点击列表中的heroes时,该组件应该在页面底部显示所选heroes的详细信息

在本节中,您将听取heroes项目点击事件并更新heroes细节。

 

添加一个点击事件绑定到<li>这样的:

 


  1. <
    li *ngFor="let hero of heroes" (click)="onSelect(hero)">

 

这是Angular的事件绑定语法的一个例子

周围的圆括号click告诉Angular倾听<li>元素的 click事件。当用户点击时<li>,Angular执行onSelect(hero)表达式。

onSelect()HeroesComponent你即将写的一种方法。Angular用hero点击显示对象进行调用,与之前在表达式中定义<li>的相同hero*ngFor

 

重命名组件的hero属性,selectedHero但不分配它。应用程序启动时没有选定的heroes

添加以下onSelect()方法,该方法将模板中单击的heroes分配给组件selectedHero

 

  1. // src / app / heroes / heroes.component.ts(onSelect)
  2. selectedHero: Hero;
  3. onSelect(hero: Hero): void {
  4. this.selectedHero = hero;
  5. }

 

模板仍然引用hero不再存在的组件的旧属性。重命名heroselectedHero

  1. //heroes.component.html
  2. <h2>{{ selectedHero.name | uppercase }} Details</h2>
  3. <div><span>id: </span>{{selectedHero.id}}</div>
  4. <div>
  5. <label>name:
  6. <input [(ngModel)]="selectedHero.name" placeholder="name">
  7. </label>
  8. </div>

 

 

浏览器刷新后,应用程序被破坏。

打开浏览器开发人员工具,然后在控制台中查找像这样的错误消息:

 

现在点击其中一个列表项。该应用程序似乎再次工作。heroes出现在列表中,并且关于被点击的heroes的详细信息出现在页面的底部。

当应用程序启动时,这selectedHeroundefined 设计

在模板中引用selectedHero{{selectedHero.name}}– 这样的表达式的属性的绑定表达式必须失败,因为没有选定的heroes。

如果selectedHero存在,组件应该只显示选定的heroes细节

将heroes细节HTML包装在一个<div>将Angular的指令添加并设置为*ngIf<div>selectedHero

不要忘记前面的星号(*)ngIf这是语法的关键部分。

 

src / app / heroes / heroes.component.html(* ngIf)

  1. <div *ngIf="selectedHero">
  2.  
  3. <h2>{{ selectedHero.name | uppercase }} Details</h2>
  4. <div><span>id: </span>{{selectedHero.id}}</div>
  5. <div>
  6. <label>name:
  7. <input [(ngModel)]="selectedHero.name" placeholder="name">
  8. </label>
  9. </div>
  10.  
  11. </div>

 

 

浏览器刷新后,名称列表重新出现。详细信息区域为空白。点击一个heroes并显示其详细信息。

何时selectedHero未定义,ngIf从DOM中删除heroes细节。没有selectedHero绑定担心。

当用户选择heroes时,selectedHero有一个值 ngIf并将heroes详细信息放入DOM中。

 

当所有元素看起来相似时,很难在列表中识别选定的heroes<li>

如果用户点击“Magneta”,那么这个heroes应该用一个独特但微妙的背景颜色渲染,如下所示:

 

 

 

这个选定的heroes着色是你在前面添加.selected样式中的CSS类的工作您只需将该.selected应用<li>用户点击该类时。

Angular 类的绑定可以很容易地有条件地添加和删除一个CSS类。只需添加[class.some-css-class]="some-condition"到你想要的样式。

下面添加[class.selected]绑定到<li>HeroesComponent模板:

 

heroes.component.html(切换\’所选\’CSS类)

  1. [class.selected]="hero === selectedHero"

 

当前行的heroes是相同的selectedHero,Angular添加了selectedCSS类。当两位heroes不一样时,Angular会删除这个班级。

完成<li>看起来像这样:

  1. <li *ngFor="let hero of heroes"
  2. [class.selected]="hero === selectedHero"
  3. (click)="onSelect(hero)">
  4. <span class="badge">{{hero.id}}</span> {{hero.name}}
  5. </li>

 

 

最终源码:

  1. //heroes.component.ts
  2. <h2>My Heroes</h2>
  3. <ul class="heroes">
  4. <li *ngFor="let hero of heroes"
      
      //选择所选类
  5. [class.selected]="hero === selectedHero"
      
      //添加单击事件
  6. (click)="onSelect(hero)">
  7. <span class="badge">{{hero.id}}</span> {{hero.name}}
  8. </li>
  9. </ul>
  10. <div *ngIf="selectedHero">
  11. <h2>{{ selectedHero.name | uppercase }} Details</h2>
  12. <div><span>id: </span>{{selectedHero.id}}</div>
  13. <div>
  14. <label>name:
  15. <input [(ngModel)]="selectedHero.name" placeholder="name">
  16. </label>
  17. </div>
  18. </div>
  1. /* HeroesComponent\'s private CSS styles */
  2. .selected {
  3. background-color: #CFD8DC !important;
  4. color: white;
  5. }
  6. .heroes {
  7. margin: 0 0 2em 0;
  8. list-style-type: none;
  9. padding: 0;
  10. width: 15em;
  11. }
  12. .heroes li {
  13. cursor: pointer;
  14. position: relative;
  15. left: 0;
  16. background-color: #EEE;
  17. margin: .5em;
  18. padding: .3em 0;
  19. height: 1.6em;
  20. border-radius: 4px;
  21. }
  22. .heroes li.selected:hover {
  23. background-color: #BBD8DC !important;
  24. color: white;
  25. }
  26. .heroes li:hover {
  27. color: #607D8B;
  28. background-color: #DDD;
  29. left: .1em;
  30. }
  31. .heroes .text {
  32. position: relative;
  33. top: -3px;
  34. }
  35. .heroes .badge {
  36. display: inline-block;
  37. font-size: small;
  38. color: white;
  39. padding: 0.8em 0.7em 0 0.7em;
  40. background-color: #607D8B;
  41. line-height: 1em;
  42. position: relative;
  43. left: -1px;
  44. top: -4px;
  45. height: 1.8em;
  46. margin-right: .8em;
  47. border-radius: 4px 0 0 4px;
  48. }

 

  1. //heroes.component.ts

    import
    { Component, OnInit } from \'@angular/core\';
  2. import { Hero } from \'../hero\';
  3. import { HEROES } from \'../mock-heroes\';
  4. @Component({
  5. selector: \'app-heroes\',
  6. templateUrl: \'./heroes.component.html\',
  7. styleUrls: [\'./heroes.component.css\']
  8. })
  9. export class HeroesComponent implements OnInit {
  10. heroes = HEROES;
  11. selectedHero: Hero;
  12. constructor() { }
  13. ngOnInit() {
  14. }
  15. onSelect(hero: Hero): void {
  16. this.selectedHero = hero;
  17. }
  18. }

 

 

版权声明:本文为cisum原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/cisum/p/8526725.html