angular - 作为 Angular 4中的关键字？

Question

目前正在学习 Angular 4 引入了一个新关键字:as。

AS 关键字 – 模板语法中新增的 as 关键字 用于简化 let 语法。

我刚刚实现了下面的代码。

<div *ngIf="users | async as usersModel">
    <h2>{{ usersModel.name }}</h2> <small>{{ usersModel.age }}</small>
</div>

对于以下问题，我无法从任何地方获得更多详细信息。

问题:

• users 对象和userModel 对象有什么区别*。
• as关键字的主要用途是什么？
• 模板中的as和let有什么区别？

Answer 1

您已经准备好了使用“as”关键字的最佳示例。

如果你不使用它，你的代码可读性会降低，看起来像这样:

<div *ngIf="users | async as usersModel">
    <h2>{{ (users | async)?.name }}</h2> <small>{{ (users | async).age }}</small>
</div>

在此示例中，用户是Observable 对象。感谢 as 关键字，您可以将 Observable 对象上的 async 管道的结果分配给 userModel。 F.E.

如果用户是 users: Observable<User>;然后 usersModel 是 users 变量上的异步管道的结果，所以它就像 usersModel: User对象。

---

@EDIT 关于as 和let

的问题

我无法告诉您as 和let 之间有什么区别，因为这是两个不同的事物。 let 是一个 javascript 变量类型，即:

let allows you to declare variables that are limited in scope to the block

as 是一个 Angular 关键字，您可以将方法/管道的结果分配给其他变量。

---

这是你的第一篇文章，所以我提醒:Angular 不是编程语言，而是 JavaScript 框架。 Angular 中的大多数东西都与纯 JS 或 TS 相关。

Angular 中的 for 循环声明是 ECMAScript6 数组中 for 循环声明的副本，f.e.

for 循环 (ECMAScript6)

let iterable = [10, 20, 30];

for (let value of iterable) {
  console.log(value);
}

组件模板中的for循环

<div *ngFor="let user of users">

关键字as是对方法的变量结果进行赋值的快捷方式，f.e对于某些管道

some.pipe.ts

@Pipe({
    name: 'somePipe'
})
export class SomePipe {
    transform(value: number): number {
        return number * 2;
    }
}

使用 <div *ngIf="someValue | somePipe as otherValue">就像:

let otherValue = SomePipe.transform(someValue);

你明白了吗？

p.s:当然，我回答的最后一段只是心理上的捷径。如果您想知道 ngFor 和 ngIf 指令是如何“内部”工作的，我建议您观看 Nir Kaufman - Demystified Angular Directives讲座。