HoneyMoose

英雄指南的  HeroesComponent  目前获取和显示的都是模拟数据。 本节课的重构完成之后， HeroesComponent  变得更精简，并且聚焦于为它的视图提供支持。这也让它更容易使用模拟服务进行单元测试。 如果你希望从 GitHub 上查看我们提供测试的源代码，你可以访问下面的链接： https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-services 为什么需要服务 组件不应该直接获取或保存数据，它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务。 本节课，你将创建一个  HeroService ，应用中的所有类都可以使用它来获取英雄列表。 不要使用  new  来创建此服务，而要依靠 Angular 的 依赖注入 机制把它注入到  HeroesComponent  的构造函数中。 服务是在多个“互相不知道”的类之间共享信息的好办法。 你将创建一个  MessageService ，并且把它注入到两个地方： HeroService  中，它会使用该服务发送消息。 MessagesComponent  中，它会显示其中的消息。 创建  HeroService 使用 Angular CLI 创建一个名叫  hero  的服务。 ng generate service hero 该命令会在 src/app/hero.service.ts 中生成 HeroService 类的骨架。 HeroService 类的代码如下： src/app/hero.service.ts (new service) import   { Injectable } from  '@angular/core' ;   @Injectable ({    providedIn:  'root' , }) export  class   HeroService...

此刻， HeroesComponent  同时显示了英雄列表和所选英雄的详情。 把所有特性都放在同一个组件中，将会使应用“长大”后变得不可维护。 你要把大型组件拆分成小一点的子组件，每个子组件都要集中精力处理某个特定的任务或工作流。 本页面中，你将迈出第一步 —— 把英雄详情移入一个独立的、可复用的  HeroDetailComponent 。 HeroesComponent  将仅仅用来表示英雄列表。  HeroDetailComponent  将用来表示所选英雄的详情。 你可以访问下面的链接  https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-heroes-master-detail  从 GitHub 上查看我们提供源代码。 制作  HeroDetailComponent 使用 Angular CLI 生成一个名叫  hero-detail  的新组件。 ng generate component hero-detail 这个命令会做这些事： 创建一个目录  src/app/hero-detail . 在这个目录中会生成四个文件： 作为组件样式的 CSS 文件。 作为组件模板的 HTML 文件。 存放组件类  HeroDetailComponent  的 TypeScript 文件。 HeroDetailComponent  类的测试文件。 该命令还会把  HeroDetailComponent  添加到  src/app/app.module.ts  文件中  @ NgModule  的  declarations  列表中。 编写模板 从  HeroesComponent  模板的底部把表示英雄详情的 HTML 代码剪切粘贴到所生成的  HeroDetailComponent  模板中。 所粘贴的 HTML 引用了  selectedHero 。 新的...

在本页面，你将扩展《英雄指南》应用，让它显示一个英雄列表， 并允许用户选择一个英雄，查看该英雄的详细信息。 创建模拟（mock）英雄数据 你需要一些英雄数据以供显示。 最终，你会从远端的数据服务器获取它。但是目前，你需要创建一些 模拟英雄（some mock heroes） ，并假设这些数据是从远程服务器上获取的。 在  src/app/  文件夹中创建一个名叫  mock-heroes.ts  的文件。 定义一个包含十个英雄的常量数组  HEROES ，并导出它。 该文件是这样的。 src/app/mock-heroes.ts import   { Hero } from  './hero' ;   export  const   HEROES: Hero[] = [    { id:  11 , name:  'Mr. Nice'   },    { id:  12 , name:  'Narco'   },    { id:  13 , name:  'Bombasto'   },    { id:  14 , name:  'Celeritas'   },    { id:  15 , name:  'Magneta'   },    { id:  16 , name:  'RubberMan'   },    { id:  17 , name:  'Dynama'   },    { id:  18 , name:  'Dr IQ'   },    { id:  19 , name:  'Magma'   },  ...

应用程序现在有了基本的标题。 接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。 创建英雄组件 使用 Angular CLI 创建一个名为  heroes  的新组件。 ng generate component heroes CLI 创建了一个新的文件夹，  src/app/heroes/ ，并生成了  HeroesComponent  的 4 个文件。 HeroesComponent  的类文件如下： heroes.component.ts import   { Component, OnInit } from  '@angular/core' ;   @Component ({    selector:  'app-heroes' ,    templateUrl:  './heroes.component.html' ,    styleUrls: [ './heroes.component.css' ] }) export  class   HeroesComponent  implements   OnInit {      constructor() { }      ngOnInit() {    }   } 你要从 Angular 核心库中导入  Component  符号，并为组件类加上  @ Component  注解。 @ Component  是一个修饰器函数，这个函数为组件指定了 Angular 元数据。 CLI 自动生成了三个元数据属性： selector  — 组件的 CSS 元素选择器。 templateUrl  — 组件模板文件的位置。 styleUrls   — 组件私有 CSS...