作为 angular 4 中的关键字？

Question

目前正在学习 Angular 4 介绍了一个新关键字：as.

AS 关键字 – 模板语法的新添加是 as keyword 用于简化 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 关键字，您可以将 userModel 结果分配给 Observable 对象上的 async 管道。 F.e.

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

@EDIT 关于 as 和 let

的问题

我不能告诉你as和let有什么区别，因为这是两个不同的东西。 let是一个javascript变量类型，即：

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

因为是一个Angular关键字，可以将method/pipe的结果赋给其他变量。

这是你的第一个post所以我提醒：Angular不是编程语言，而是JavaScript框架。 Angular中的大多数内容与纯JS或TS有关。

Angular 中的 for 循环声明是 ECMAScript6 数组循环声明的副本，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 for some pipe

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 讲座。

Answer 2

已接受的答案遗漏了一个非常重要的观点：async 订阅您的 observable 以获得已解析的值。

想象一下这个场景：

组件:

user:Observable<IUser> = httpClient.get(url);

模板：

<div>
    <h2>{{ (users|async).name }}</h2> <small>{{ (users|async).age }}</small>
</div>

在上述情况下，由于您使用了 async 两次，httpClient 正在发出获取请求两次。

所以回答你的问题：

Q。 as关键字的主要用途是什么？

A。 as 关键字使您的代码看起来不错，但更重要的是 它确保您只对给定的可观察对象使用一次异步，正如我上面解释的那样。

Q。模板中的as和let有什么区别？

A。 let 是一个 Javascript 关键字。 as 关键字只能被 angular 模板编译器识别。两者都执行相同的声明和初始化变量的工作。在某些地方，例如 *ngFor 中，两者都是可替换的。但是在 *ngIf 的情况下，它需要表达式中的布尔变量，而 let x = true 不是 return 布尔变量，因此您只能使用 as。

Q。 users对象和userModel对象

有什么区别

A。这已经回答了。 users 对象是 Observable 而 userModel 对象是 users Observable.

的解析值

作为 angular 4 中的关键字？

as keyword in angular 4?

let

angular

问题：