angular4 官网英雄指南 01

1、新建项目 （使用angular-cli）
ng new ng-hero
提示：命令提示符以管理员身份运行比较好，目录在英文路径下（为了避免可能莫名的错误）

Paste_Image.png

cd到项目目录，安装npm包，最后启动项目

cd ng-hero
cnpm install
ng serve --open

Paste_Image.png

启动后效果

Paste_Image.png

2、添加英雄model
ng g class hero

export class Hero {
    id:number;
    name:string;
}

Paste_Image.png

修改app.component.ts文件

import { Component } from '@angular/core';
import {Hero} from './hero';

@Component({
  selector: 'app-root',
  template:`
    
{{title}}
    
{{hero.name}} details!
    
id: {{hero.id}}
    

      name: 
      
    
  `
})
export class AppComponent {
  title = 'Tour of Heroes';
  hero:Hero={
    id:1,
    name:'windstorm'
  }
}

可以看到上面使用到了ngModel，所以要在app.module.ts中引入 FormsModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3、app.component.ts改成列表显示，并增加样式

import { Component } from '@angular/core';
import {Hero} from './hero';

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: 'app-root',
  template:`
    
{{title}}
    

      

        {{hero.id}} {{hero.name}}
      
    
  `,
  styleUrls:['./app.component.css']
})
export class AppComponent {
  title = 'Tour of Heroes';
  heroes=HEROES;
}

app.component.css样式

.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;
  }

4、为英雄添加选中项(点击选中) li里添加点击事件，并用一个变量存储已经选中的英雄
app.component.ts

import { Component } from '@angular/core';
import {Hero} from './hero';

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: 'app-root',
  template:`
    
{{title}}
    

      
{{selectedHero.name}} details!
      
id: {{selectedHero.id}}
      

        name: 
        
      
    
    

      

        {{hero.id}} {{hero.name}}
      
    
  `,
  styleUrls:['./app.component.css']
})
export class AppComponent {
  title = 'Tour of Heroes';
  heroes=HEROES;
  selectedHero:Hero;
  onSelect(hero:Hero):void{
    this.selectedHero=hero;
  }
}

注意页面上使用的ngIf指令，因为开始的时候没有选中任何英雄，而页面上直接selectedHero.name会报错，所以加上ngIf包裹
最后效果

Paste_Image.png