Angular2笔记5-service

Posted on   |   In   |  

ng-book这书看到一半, Angular2官网出中文教程了…
看了看还是官网的教程好一些, 更简明一些

Service和spring里的service类似, 推荐让框架自己依赖注入
(光从语法看就和java一样臃肿…)

文件命名规范

推荐加一级后缀名, 比如.component.ts和 .service.ts

1
2
3
4
app.component.ts
app.component.css
data.service.ts

hero.service.ts

1
2
3
4
5
6
7
8
9
import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
@Injectable()
export class HeroService {
  getHeroes() {
    return Promise.resolve(HEROES);//模拟一个异步从远程获取数据的过程
  }
}

component.ts

“OnInit”是ng框架里的生命周期, 为了适时的注入, 所以得符合框架规范:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { OnInit } from '@angular/core';
@Component({
  selector: '....',
  template: ``,
  directives: [HeroDetailComponent],//子组件
  providers: [HeroService]//对应@Injectable()的依赖注入
})
//OnInit是生命周期的一环
export class AppComponent implements OnInit {
  title = 'Tour of Heroes';
  heroes: Hero[];
  selectedHero: Hero;
  constructor(private heroService: HeroService) { }//注入, 并没有new
  getHeroes() {
    this.heroService.getHeroes().then(heroes => this.heroes = heroes);
  }
  ngOnInit() {
    //让框架自己适时调用
    this.getHeroes();
  }
  onSelect(hero: Hero) { this.selectedHero = hero; }
}

子组件.ts

声明成 输入属性

1
2
3
4
5
6
7
8
9
10
@Component({
  ...
  template: `
    <input [(ngModel)]="hero.name" placeholder="name"/>
  `
})
export class HeroDetailComponent {
  @Input()
  hero: Hero;
}