【个人笔记重点，不作为参考】主题：angular2.0笔记

 总结：
1、@NgModule装饰元数据
2、constructor(private service: HeroService) { } //用于组件内。
重点： Angular会以这些服务为参数去调用组件的构造函数。 这就是依赖注入 。
3.我们倾向于让组件保持精简。组件本身不从服务器获得数据、不进行验证输入，也不直接往控制台写日志。 它们把这些任务委托给服务。
组件的任务就是提供用户体验，仅此而已。它介于视图(由模板渲染)和应用逻辑(通常包括模型（model）的观念)之间。 设计良好的组件为数据绑定提供属性和方法，把那些其它对它们不重要的事情都委托给服务。
4.百度静态资源管理库：http://cdn.code.baidu.com/


5.模板的内联与模板文件
 ·我们可以使用template属性把它定义为 内联 的，
 ·模板定义在一个独立的HTML文件中， 并通过在@Component装饰器中的templateUrl属性把它链接到组件。
6.模板是包在ECMAScript 2015反引号（`）中的一个多行字符串。 反引号（`） —— 注意，不是单引号(') —— 允许把一个字符串写在多行上， 使HTML模板更容易阅读。
7.当appcomponent组件内部添加另一个组件时，在@component中directives:[组件名]


8.尽量不要用$event把整个DOM事件传到方法中。


9.在我们让表单输入支持双向数据绑定之前，我们得先导入FormsModule模块。
import { FormsModule }   from '@angular/forms';
 只要把它添加到NgModule装饰器的imports数组中就可以了，
@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ]
}）
该数组是应用中
用到的外部模块列表。 这样我们就引入了表单包，其中包含了ngModel。


10.
@NgModule({
imports: [
很像内部的引入一样。如 BrowserModule, FormsModule
],
declarations:[
很像新编写的。如AppComponent、hero这种类或组件
]


})
11.<input required>意思是必填项
<label for=”lfy”>lable中的for绑定表单元素id
每个 input 元素都有id属性，label元素的for属性用它来匹配到对应的输入控件。
每个 input 元素都有name属性，Angular 表单用它注册控件
当在表单中使用[(ngModel)]时，必须要定义name属性


12.[(ngModel)]="hero.name"双向绑定
类似于  [ngModel]="hero.name"输入hero.name的值
(ngModleChange)="hero.name=$event"输出更新hero.name的值
ngModleChange 是angular EventEmitter类型的属性。用来给模型赋值


13.[hidden]="name.valid||name.pristine" 隐藏条件为"#name标签那里，反应当前状态"


14.
newHero() {
  this.model = new Hero(42, '', '');
}
<button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">New Hero</button>


使用浏览器工具审查这个元素就会发现，这个 name 输入框并不是全新的。 表单记得我们在点击 New Hero 前输入的名字。 更换了英雄并不会重置控件的“全新”状态。


我们必须清除所有标记，在调用newHero()方法后调用表单的reset()方法即可。


15.仅仅用type="submit"触发“表单提交”是没用的，还应加ngSubmit指令更新form标签，通过事件绑定把他绑定上
<form (ngSubmit)="onSubmit()" #heroForm="ngForm">


NgForm指令为form元素扩充了额外的特性。 它持有通过ngModel指令和name属性为各个元素创建的那些控件，并且监视它们的属性变化，包括有效性。 它还有自己的valid属性，只有当其中所有控件都有效时，它才有效。


16.为每个服务类添加@Injectable()，包括那些没有依赖严格来说并不需要他的。因为：
面向未来：没有必要记得在后来添加依赖的时候添加@Injectable()
一致性：所有的服务都遵循同样的规则，不需要考虑为什么某个地方少了一个


17.[{ provide: Logger, useClass: Logger }]当请求第一个Logger服务的时候，返回useClass中的Logger


18. [ logger ,{provide:useService,useVlaue:valueService }]
useValue选项注册提供商，valueService这个对象扮演userService
19.[ NewLogger,  { provide: OldLogger, useExisting: NewLogger}]
     使用useExisting选项指定别名，防止出现两个NewLogger
20.export interface AppConfig{}声明一个内部引用的字符串、函数或者对象
  export const ss:AppConfig={}规定ss为AppConfig方法


21.在 Angular 的世界中，attribute 唯一的作用是用来初始化元素和指令的状态。 当进行数据绑定时，只是在与元素和指令的 property 和事件打交道，而 attribute 就完全靠边站了。


22.数据绑定中：一般建议是，只绑定数据属性和那些只返回值而不做其它事情的方法。


23.[ngStyle]=”method()”与[ngClass]=”method()”多种的样式选择，在method方法内，做出相应选择。


24.*ngSwitch这种内置指令，表达方式可以展开，
如：<span *ngSwitchCase="xxx">aaa</span>
等同于<template><span [ngSwitchCase]="'xxx'">aaaa</span></template>
*ngSwitchDefault变为<template ngSwitchDefault></template>


如：<hero-detail *ngFor="let hero of heroes;trackBy:trackByHeroes" [hero]="hero"></hero-detail>
<hero-detail template="ngFor let hero of heroes;trackBy:trackByHeroes" [hero]="hero"></hero-detail>
<template ngFor let-hero [ngForof]="heroes" [ngForTrackBy]="trackByHeroes">
<hero-detail [hero]="hero"></hero-detail>
</template>


25.模板引用变量写法：1、#example  2、ref-example 


26.事件绑定中，参数传给call方法


27.提交表单当中，跟踪用户输入的有效性等。如
<form (ngSubmit)="onSubmit(theForm)" #theForm="ngForm">
  <button type="submit" [disabled]="!theForm.form.valid">Submit</button>
</form>


28.管道操作符中：


<span>{{birthday | date:test}}<span>      "|"操作符指定格式，date   test为
指定的类型，与数据显示样式。在组件中可以有get test(){}获得




{{a | date | uppercase}}   a设置为日期格式显示 大写。


 {{current | json }}这个对象以 json形式显示


29. 安全导航操作符(  ?.  )
例如{{a.name}}加入a.name并没有。那么他会报错。告诉你他不存在。
放入 {{a?.name}}假如a.name不存在了，或者消失，那么不会报错。 只是页面不显示了而已


30.装饰器后面记得加()
如@Component({})




内置指令待看


getHero():Promise<Hero[]>{
return Promise.resolve
}


31.路由的启动是由什么启动的呢？
import { provideRouter } "@angular/router"
并且在页面中。写入  provideRouter(routes)  启动这个叫routes路由


RouterLink和RouterOutlet是ROUTER_DIRECTIVES集合中的指令，使用他们的话，应该加入
import { ROUTER_DIRECTIVES } from "@angular/router"
并且在@Component({
directives:[ ROUTER_DIRECTIVES ]
})


import { APP_BASE_HREF} from '@angular/common';
bootstrap(Appcomponent,[ { provide:APP_BASE_HREF,useValue:'<%= APP_BASE　%>' }  ])


import { Router } from "@angular/router" 类似于一个服务。
在 constructor(private router:Router){


}使用这个进行路由导航

注：节以***结束

目录：创建app目录

1.App.component.ts        根组件

2.App.module.ts               根模块

3.Main.ts                                     可运行的应用

 

各个字节解析如下

一、App.component.ts  根组件

import { Component } from'@angular/core';//访问angular核心库中的Component装饰器函数

@Component({

  selector: 'my-app',//selector定义一个标签，假如是my-app就显示该组件：转换器

  template: `<h1>Hello {{name}}</h1>`})//类似于在标签内显示的内容。：模板

exportclassAppComponent { name = 'Angular'; }

问题：1、@Component必须这样命名嘛

      2、export类似于定义名称导出？AppComponent是随意命名嘛。是不是为了让模块引用的名，与下面模块的AppComponent是同一个名字吗

二、App.module.ts          根模块

import { NgModule }      from'@angular/core';         //访问核心库中的NgModule

import { BrowserModule } from'@angular/platform-browser';//模块运行在浏览器应用需加入

import { AppComponent }  from'./app.component';      //导入AppComponent组件

l

  imports:      [ BrowserModule ],//本模块声明的组件模板需的类所在的其他模块

  declarations: [ AppComponent ],//声明——本模块中拥有的视图类。Angular有三种视图类：组件、指令和管道（告诉angular哪个组件属于appmodule）

  bootstrap:    [ AppComponent ],//制定应用的主视图【称为根组件】

  exports:      [ AppComponent ],//declarations的子集，可用于其他模块的组件模板（让其他模块import访问）

  providers:    [ Logger ]})//服务的创建者，并加入到全局服务表中，可用于应用任何部分。

exportclassAppModule { }

问题：1、import { AppComponent }  from'./app.component';单引号的路径是什么

三、Main.ts                                可运行的应用

import { platformBrowserDynamic } from'@angular/platform-browser-dynamic';

import { AppModule }              from'./app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

问题：1、platformBrowserDynamic().bootstrapModule(AppModule);什么意思

运行的方式

*********

目录：架构

1、模块(Modules)

2、组件(Components)

3、模板(Templates)

4、元数据(Metadata)

5、数据绑定(Data Binding)

6、指令(Directives)

7、服务(Services)

8、依赖注入(Dependency Injection)

二、angular模块库：

Angular发布了一组JavaScript模块。我们可以把它们看做库模块。

每个Angular库的名字都带有@angular前缀。

我们可以用npm包管理工具安装它们，用JavaScript的import语句导入其中某些部件。

import { BrowserModule } from '@angular/platform-browser';

三、组件：Components

      组件负责控制屏幕上的一小块区域，我们称之为视图。.

         通过一些由属性和方法组成的API与视图交互。

当用户在这个应用中漫游时，Angular会创建、更新和销毁组件。 应用可以通过生命周期钩子在组件生命周期的各个时间点上插入自己的操作，例如上面声明的ngOnInit()。

问题：下面类的理解

exportclassHeroListComponentimplementsOnInit {

  heroes: Hero[];

  selectedHero: Hero | string;赋予它不同类型的变量值

  constructor(private service: HeroService) { }

  ngOnInit() {//

    this.heroes = this.service.getHeroes();

  }

  selectHero(hero: Hero) { this.selectedHero = hero; }

}

四、模板：Templates

相似于html

五、元数据：Metadata

相关开始。。。

类的定义

        文件于app/hero-list.component.ts

exportclassHeroListComponentimplementsOnInit {

  heroes: Hero[];

  selectedHero: Hero;

  constructor(private service: HeroService) { }

  ngOnInit() {

    this.heroes = this.service.getHeroes();

  }

  selectHero(hero: Hero) { this.selectedHero = hero; }}

相关结束。。。

总结：只要把元数据附加到这个类，就相当于告诉Angular：HeroListComponent是个组件。

@Component({

  moduleId: module.id,//相对当前文件的相对路径。看templateUrl

  selector:    'hero-list',转换器

  templateUrl: 'hero-list.component.html',

  providers:  [ HeroService ]}//需要一个叫HeroService服务，这样组件可以从服务中获得英雄数据

)

用装饰器Component来附加元数据

@Component里面的元数据会告诉Angular如何取得你为组件指定的元数据。

问题：1、@Commonent中的moduleId: module.id是什么

相对当前文件的相对路径。

六、数据绑定Databinding

：简短的理解一下这都是什么

<li>{{hero.name}}</li>

<hero-detail [hero]="selectedHero"></hero-detail>    

<li (click)="selectHero(hero)"></li>

<input [(ngModel)]="hero.name">

七、指令（directive)

Angular模板是动态的。当Angular渲染它们时，他会根据指令提供的操作对DOM进行转换

指令是一个带有“指令元数据”的类。

1、结构型指令 ：通过在DOM中添加、移除和替换元素来修改布局。

<li *ngFor="let hero of heroes"></li>告诉Angular为heroes列表每个英雄生成一个<li>标签

问题：heroes列表是什么？

<hero-detail *ngIf="selectedHero"></hero-detail>表示只有在选择的英雄存在时，才会包含HeroDetail组件。

 

2、属性型指令 ：修改一个现有元素的外观或行为。在模板中，它们看起来就像是标准的HTML属性。

<input [(ngModel)]="hero.name">

八、服务service

几乎任何东西都可以是一个服务。典型的服务是一个类，具有专注的、明确的用途。他应该做一件特定的事情，并把它做好

logging service日志服务

类

exportclassLogger {

  log(msg: any)   { console.log(msg); }        ？？

  error(msg: any) { console.error(msg); }     ？？

  warn(msg: any)  { console.warn(msg); }       ？？

}

九、依赖注入（Dependency injection)

讲述：
“依赖注入”是提供类的新实例的一种方式，还负责处理好类所需的全部依赖。大多数依赖都是服务。 Angular也使用依赖注入提供我们需要的组件以及这些组件所需的服务。

constructor(private service: HeroService) { }//从注入器的众多服务中选取一个HeroService填入组件

问题：注入器是下面的这两种嘛？

第一种：把提供商添加到根模块上，以便在任何地方使用服务的同一个实例。

app/app.module.ts下的@NgModule({providers: [  BackendService,  HeroService,  Logger]})

第二种：@Component元数据中的providers属性注册在组件层

*********

目录：显示数据

第一种单独

exportclassAppCtorComponent {

  title: string;

  myHero: string;

  constructor() {

this.title = 'Tour of Heroes'\

;

    this.myHero = 'Windstorm';

  }}

问题：1.上面与下面的区别？

     2.string代表定义的数据格式？

export class AppCtorComponent {

        title='aaa',

        myHero='bbb'

}

第二种多个

exportclassAppComponent {

  title = 'Tour of Heroes';

  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];

  myHero = this.heroes[0];

}

template: `

    <h1>{{title}}</h1>

    <h2>My favorite hero is: {{myHero}}</h2>

    <p>Heroes:</p>

<ul><li *ngFor="let hero of heroes">{{ hero }}</li></ul>  //let相当于定义一个变量，之后由{{hero}}获取

1、为数据创建一个类app/hero.ts

exportclassHero {

Public variable: string;

  constructor(

Private 

    public id: number,  //定义一个属性id默认格式number？

public name: string//定义一个属性name默认格式string

)

Getfunction(){

Return this.variable}

}

Obj = New Hero(1,’111’)

obj.variable

总结：

public id: number

·声明了一个构造函数参数及其类型

·声明了一个同名的公共属性

·当我们new出该类的一个实例时，把该属性初始化为相应的参数值

2、使用Hero类

定义

Heroes=[

new Hero(1,'windstorm'),

new Hero(12,'bb'),

new Hero(13,'cc'),

new Hero(14,'dd'),

];

写入

template: `

  <h1>{{title}}</h1>

  <h2>My favorite hero is: {{myHero.name}}</h2>

  <p>Heroes:</p>

  <ul>

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

      {{ hero.name }}

    </li>

  </ul>

总结：

1、用带有双花括号的插值表达式（interpolation）来显示一个组件属性如:{{name}}

2、用ngFor来显示数组(类似于heroes遍历)

如:<li *ngFor=”let hero of heroes”></li>

?3、用一个TypeScript类hero.ts来为我们的组件描述数据模型并显示模型的属性。

4、ngIf用来根据一个布尔表达式有条件地显示一段HTML.

<p *ngIf=”heroes.length>3”>x</p>如果组件中的列表多余3显示本条信息

*********

目录：用户输入

 

1、绑定到用户输入事件:(事件触发相应方法)

                   为了绑定DOM事件，只要把DOM事件的名字包裹在圆括号中，然后用一个放在引号中的模板语句对它赋值就可以了。

@Component({

  selector: 'click-me',

  template: `

    <button (click)="onClickMe()">Click me!</button>

{{clickMessage}}`})

exportclassClickMeComponent {

  clickMessage = '';

  onClickMe() {

    this.clickMessage = 'You are my hero!';

  }}

2、通过$event对象取得用户输入

template: `

  <input (keyup)="onKey($event)">

  <p>{{values}}</p>

`

exportclassKeyUpComponent_v1 {

  values = '';

  onKey(event:any) { // without type info     

    this.values += event.target.value + ' | ';

  }}

问题：1、onKey(event:any)event后面的：any是干什么的？

      2、你可以通过用event.key来为event.target.value积累各个按键本身，这样同样的用户输入可以产生：a | b | c | backspace | backspace | backspace |

      3、exportclassKeyUpComponent_v1 {

  values = '';

  onKey(event: KeyboardEvent) { // with type info对象

    this.values += (<HTMLInputElement>event.target).value + ' | ';

  }}

总结：·Keyup：按下并释放一个按键时触发该事件

·当DOM的keyup事件触发的时候，传递一个$event对象，给onKey()方法

·所有标准DOM事件对象都有一个target属性， 它代表了触发该事件的元素。 在本用例中，target是<input>元素对象， 而且event.target.value返回该元素的当前内容。

·当appcomponent组件内部添加另一个组件时，在@component中directives:[组件名]

3、从一个模板引用变量中获得用户输入

$Component({

Selector:’loop-back’,

Template:`

<input #a (keyup)=”0”>   //#a是一个指针，下面的p标签由指针获得input标签

<p>{{a.value}}</p>

`

})

Export class loopbackComponent{}

 

*********

目录：表单

小结：

1.<input required>意思是必填项

2.<label for=”lfy”>lable中的for绑定表单元素id

每个 input元素都有id属性，label元素的for属性用它来匹配到对应的输入控件。

每个 input元素都有name属性，Angular表单用它注册控件

当在表单中使用[(ngModel)]时，必须要定义name属性

3.[(ngModel)]="hero.name"双向绑定

类似于  [ngModel]=" hero.name"输入hero.name的值

        (ngModleChange)="hero.name=$event"输出更新hero.name的值

ngModleChange是angular EventEmitter类型的属性。用来给模型赋值

4.使用ngSubmit提交表单

仅仅用type="submit"触发“表单提交”是没用的，还应加ngSubmit指令更新form标签，通过事件绑定把他绑定上

<form (ngSubmit)="onSubmit()" #heroForm="ngForm">

NgForm指令为form元素扩充了额外的特性。它持有通过ngModel指令和name属性为各个元素创建的那些控件，并且监视它们的属性变化，包括有效性。它还有自己的valid属性，只有当其中所有控件都有效时，它才有效。

*********

目录：依赖注入

总结：

1. [ logger ,{provide:useService,useVlaue:valueService }]

useValue选项注册提供商，valueService这个对象扮演userService

2.[ NewLogger,  { provide:OldLogger, useExisting:NewLogger}]

     使用useExisting选项指定别名，防止出现两个NewLogger

3.exportinterface AppConfig{}声明一个内部引用的字符串、函数或者对象

  export const ss:AppConfig={}规定ss为AppConfig方法

内容：

1、无依赖注入

public engine:Engine;

public tires:Tires;

public description ='No DI';

constructor() {

  this.engine =newEngine();

  this.tires =newTires();

}

2、有依赖注入

public description ='DI';

constructor(public engine:Engine, public tires: Tires) {//Engine的引用方法import { Engine }from‘类’

            let car = new Car(new Engine(),newTires())

 }

3.constructor(heroService: HeroService) {

  this.heroes =heroService.getHeroes();

}

注意，构造函数参数的类型是HeroService，并且HeroListComponent类有一个@Component装饰器（往上翻可以确认）。另外，记得父级组件 (HeroesComponent)有HeroService的providers信息。

构造函数参数类型、@Component装饰器和父级的providers信息合起来告诉 Angular 的注入器，任何新建HeroListComponent的时候，注入一个HeroService的实例。

4.显性注入器的创建

injector = ReflectiveInjector.resolveAndCreate([Car,Engine, Tires]);

  let car = injector.get(Car);

5.别名类提供商

假设某个旧组件依赖一个OldLogger类。 OldLogger和NewLogger具有相同的接口，但是由于某些原因，我们不能升级这个旧组件并使用它。

当旧组件想使用OldLogger记录消息时，我们希望改用NewLogger的单例对象来记录。

不管组件请求的是新的还是旧的日志服务，依赖注入器注入的都应该是同一个单例对象。也就是说，OldLogger应该是NewLogger的别名。

[NewLogger,

  { provide:OldLogger, useClass:NewLogger}]

解决方案：使用useExisting选项指定别名。

 [NewLogger,

  { provide:OldLogger, useExisting:NewLogger}

]

6.可选依赖

假如需要一个Logger，又不提供Logger，可以把构造函数的参数标记为@Optional()，告诉Angular该依赖是可选

import {Optional } from'@angular/core';

constructor(@Optional()private logger:Logger) {

  if (this.logger) {

    this.logger.log(some_message);

  }

}

 

 

 

问题：

1、  class MockEngineextends Engine { cylinders = 8; }

          class MockTires  extends Tires { make = 'YokoGoodStone'; }

 

2、class Engine2 {

                     constructor(publiccylinders: number) { }

          }

总结：

1、Let car =injector.get(Car)

2、下面的可以理解为：待添加的依赖

建议为每个服务类都添加@Injectable()，包括那些没有依赖严格来说并不需要它的。因为：

面向未来: 没有必要记得在后来添加依赖的时候添加 @Injectable()。

一致性:所有的服务都遵循同样的规则，不需要考虑为什么某个地方少了一个。

*********

目录：模板语法

1、<button [disabled]=”isUnchanged”></button>开始数据绑定，就不再跟HTML attribute打交道了。这是设置DOM元素、组件和指令的property

2. <input type="text" value="Bob">

当用户输入‘xxxx’时，HTML attribute value指定了初始值；DOM value property 是当前值。

4.disabled属于 attribute古怪例子。

Disabled property默认为false。当我们添加disabled attribute时，按钮的disabled property就初始化为true，按钮禁用。

添加或删除disabled attribute可以实现禁用或启用。但是他的值不重要，所以没法通过<button disabled=”false”></button>启用

5.<img [src]=”hero”>与<img bind-src=”hero”>没什么区别。有些人喜欢用bind-前缀，称为规范形式

6.  一般建议是，只绑定数据属性和那些只返回值而不做其它事情的方法。

7.<hero-detailprefix="You are my" [hero]="currentHero"></hero-detail>

Prefix是组件中的一个属性，去掉方括号把该属性初始化为固定的字符串，

8.angular数据绑定中，不允许带有script标签的HTML插入;

evilTitle ='Template <script>alert("evil never sleeps")</script>Syntax';

       注：假如带有script标签

          属性绑定：如[innerHTML]=”eviltitile”     Template Synatx

          插值表达式：如{{evititle}}             Template <script>alert("evil never sleeps")</script>Syntax

9.ARIA，SVG和table中的colspan/rowspan等attribute，没有对应属性可绑定。

 <td [attr.colspan]=”1+1”></td>

<button [attr.aria-label]=”actionName”>{{actionName}}</button>               aria用于残障人士访问互联网提供便利

10.[class.special]=”isSpecial”当引号这里成立，那么添加special这个样式，反之移除

11.[style.font-size.%]=”istyle?10:12”

12.(click)=”onSave()”相等于on-click=”onSave()”

13.EventEmitter自定义事件！！！！！待成熟的详看

14.[ngStyle]=”method()”与[ngClass]=”method()”多种的样式选择，在method方法内，做出相应选择。

15.*ngIf这个指令相当于移除元素，不止单纯的隐藏

16.          <span [ngSwitch]="toeChoice">                   [ngSwitch=”aa”]

           <span *ngSwitchCase="'Eenie'">Eenie</span>       *ngSwitchCase=”b1”如果span匹配值等于b1。填入、

           <span *ngSwitchCase="'Meanie'">Meanie</span>

           <span *ngSwitchCase="'Miney'">Miney</span>

           <span *ngSwitchCase="'Moe'">Moe</span>

          <span *ngSwitchDefault>other</span>            *ngSwitchDefault如果没有任何匹配到的填入他

          </span>

*********

目录：英雄编辑器

import { Component } from '@angular/core';

export class Hero {//定义一个类，规定属性的数据类型

  id: number;

  name: string;

}

@Component({

  selector: 'my-app',

  template: `

    <h1>{{title}}</h1>

    <h2>{{hero.name}} details!</h2>

    <div><label>id: </label>{{hero.id}}</div>

    <div>

      <label>name: </label>

      <input [(ngModel)]="hero.name" placeholder="name">//双向绑定

    </div>

    `

})

export class AppComponent {

  title = 'Tour of Heroes';

  hero: Hero = {//hero对象遵循Hero类的规定

    id: 1,

    name: 'Windstorm'

  };

}

*********

目录：主从结构

全部的代码

import { Component } from '@angular/core';

export class Hero {

  id: number;

  name: string;

}

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' },

  { id: 20, name: 'Tornado' }

];

@Component({

  selector: 'my-app',

  template: `

    <h1>{{title}}</h1>

    <h2>My Heroes</h2>

    <ul class="heroes">

      <li *ngFor="let hero of heroes"

        [class.selected]="hero === selectedHero"//hero名称为被选中selectedHero时当前li添加class样式selected

        (click)="onSelect(hero)">

        <span class="badge">{{hero.id}}</span> {{hero.name}}

      </li>

    </ul>

    <div *ngIf="selectedHero">

      <h2>{{selectedHero.name}} details!</h2>

      <div><label>id: </label>{{selectedHero.id}}</div>

      <div>

        <label>name: </label>

        <input [(ngModel)]="selectedHero.name" placeholder="name"/>

      </div>

    </div>

  `,

  styles: [`

    .selected {

      background-color: #CFD8DC !important;

      color: white;

    }

    .heroes {

      margin: 0 0 2em 0;

      list-style-type: none;

      padding: 0;

      width: 15em;

    }

    .heroes li {

      cursor: pointer;

      position: relative;

      left: 0;

      background-color: #EEE;

      margin: .5em;

      padding: .3em 0;

      height: 1.6em;

      border-radius: 4px;

    }

    .heroes li.selected:hover {

      background-color: #BBD8DC !important;

      color: white;

    }

    .heroes li:hover {

      color: #607D8B;

      background-color: #DDD;

      left: .1em;

    }

    .heroes .text {

      position: relative;

      top: -3px;

    }

    .heroes .badge {

      display: inline-block;

      font-size: small;

      color: white;

      padding: 0.8em 0.7em 0 0.7em;

      background-color: #607D8B;

      line-height: 1em;

      position: relative;

      left: -1px;

      top: -4px;

      height: 1.8em;

      margin-right: .8em;

      border-radius: 4px 0 0 4px;

    }

  `]

})

export class AppComponent {

  title = 'Tour of Heroes';

  heroes = HEROES;//把HEROES常量赋值给heroes

  selectedHero: Hero;//纠正为Hero类

  onSelect(hero: Hero): void {//当前选择的列表名纠正Hero类且执行的方法

    this.selectedHero = hero;//设置该方法的selecterHero参数为当前被选中hero名

  }

}

问题：1、void是什么？

*********

目录：路由

第一步：设置base标签

      在index.html页面的head中添加<base href=”/”>

第二部：配置路由

      import { RouterModule } from “@angular/router”   导入RouterModule

第三部：路由插座

      路由显示的位置在<router-outlet></router-outlet>

第四部：路由器链接

        Template:`<h1>aa</h1>   

<a routerlink=”/heroes”>Heroes</a>  <router-outlet></router-outlet>`

第五部：添加一个仪表盘与配置仪表盘路由

      创建一个路由下的子组件。{path:dashboard,component:DashboardComponent}

第六部：重定向

     {

       path:””,

       redirectTo:’/dashboard’,

       pathMatch:’full’

     }

第七步：配置带参数的路由

{

path:’detail/:id’,

component:DashboardComponent

}