【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中的一个关键类。

posted on   独自去流浪  阅读(142)  评论(0编辑  收藏  举报

编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配,妙~啊~
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示