【Angular学习笔记】英雄编辑器

Angular 英雄编辑器

学习文档：https://angular.cn/tutorial/toh-pt1

 

@Component是个装饰器函数，用于为该组件指定Angular所需的元数据。

ngOnInit()是一个生命周期钩子，Angular在创建完组件后很快就会调用ngOnInit()，这里是放置初始化逻辑的好地方。

管道是格式化字符串、金额、日期和其他显示数据的好办法。Angular发布了一些内置管道，而且你还可以创建自己的管道。

 

把所有特性都放在同一个组件中，将会使应用“长大”后变得不可维护。你要把大型组件拆分成小一点的子组件，每个子组件都要集中精力处理某个特定的任务或工作流。

 

[hero]="selectedHero"是Angular的属性绑定语法。

这是一种单向数据绑定。

用@Input装饰器来让hero属性可以在外部的HeroesComponent中绑定。

 

为什么需要服务？

组件不应该直接获取或保存数据，它们不应该了解是否在展示假数据。它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务。

服务是在多个“互相不知道”的类之间共享信息的好办法。

 

@Injectable()服务

注意，这个新的服务导入了Angular的Injectable符号，并且给这个服务类添加了@Injectable()装饰器。

它把这个类标记为依赖注入系统的参与者之一。HeroService类将会提供一个可注入的服务，并且它还可以拥有自己的待注入的依赖。

@Injectable()装饰器会接受该服务的元数据对象，就像@Component()对组件类的作用一样。

 

提供（provide）HeroService

你必须先注册一个服务提供商，来让HeroService在依赖注入系统中可用，Angular才能把它注入到HeroesComponent中。

 

可观察对象版本的HeroService

Observable是RxJS中的一个关键类。