angular - 这个在 Angular 中订阅 Observable 的箭头函数的正确解释是什么?
问题描述
我正在关注官方的 Angular 教程:https ://angular.io/tutorial/toh-pt4
如您所见,有一个订阅服务的组件类:
import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HeroService } from '../hero.service';
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
selectedHero: Hero;
heroes: Hero[];
constructor(private heroService: HeroService) { }
ngOnInit() {
this.getHeroes();
}
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
getHeroes(): void {
this.heroService.getHeroes()
.subscribe(heroes => this.heroes = heroes);
}
}
getHeroes()
我对这个组件的方法有些疑惑:
getHeroes(): void {
this.heroService.getHeroes()
.subscribe(heroes => this.heroes = heroes);
}
我知道我的服务返回一个Observable<Hero[]>
我必须订阅的,因为它是异步的。
我唯一不能完全理解的是内部表达式(我认为它被称为 lambda),这个:
heroes => this.heroes = heroes
这个表达的确切含义是什么?
解决方案
你是对的,它确实是一个 lambda,但是它们在 js 中更常被称为箭头函数。它们的功能相同。
该 lambda 等于:
(function (heroes) { return _this.heroes = heroes; });
因此它需要一个参数,然后将其存储在本地属性中。
您的代码段中的 Observable 也可以写成:
this.heroService.getHeroes()
.subscribe((heroes: Hero[]) => {
this.heroes = heroes;
});
哪个更清楚它返回的内容。
推荐阅读
- pandas - 数据框过滤每天的最高值并将其再次保存在具有 2 列的数据框中
- c++ - CRC-32C 传输文件的校验和
- javascript - 在 Vite 的单个 JS 文件中包含 CSS,用于单水疗
- javascript - JS DOM - 更改 CSS ::之前
- build - 在构建后编辑 /public/ 文件夹中的文本
- flutter - 如何在行和列中制作 6 个 RisedButton | 颤动与飞镖
- typescript - typescript declare:`export function`和`export type .. lambda`有什么区别?
- c# - C#请求路径与路由器路径比较
- angular - 客户端未在信号器中接收消息
- javascript - 反应复选框未正确呈现