作为角度 4 中的关键字？

Posted 2023-02-22

【中文标题】作为角度 4 中的关键字？

【英文标题】：as keyword in angular 4?

【发布时间】：2018-01-30 17:18:24

【问题描述】：

目前正在学习 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有什么区别？

【问题讨论】：

无关：angular4是angular的同义词，所以只添加angular标签就足够了

与@Faisal 无关：angularjs 标签专门用于 Angular 1.x - 您应该避免将其用于与更高版本相关的问题。

我同意你们的看法。这是我的第一个角度 4 问题。这就是为什么有点困惑。

【参考方案1】：

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

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

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

在这个例子中，用户是 Observable 对象。多亏了 as 关键字，您可以将 async 管道的结果分配给 Observable 对象上的 userModel 结果。 F.e.

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

---

@EDIT 关于 as 和 let

的问题

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

let 允许您声明在块范围内受限的变量

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

---

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

Angular 中 for 循环的声明是 ECMAScript6 中的 for loop by array 声明的副本，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 讲座。

【讨论】：

哦，太好了！这里我还有一个问题。 ? 符号在您的代码中的用途是什么？它是任何 null 检查器吗？

没错，就是“if not null”的意思，叫做“elvis operator”

很好！你能回答我的3个问题吗？我希望你能。

let is a javascript variable type。好的！在 Angular 2 中，我们在模板中使用了 let-variablename。我在问它。

【参考方案2】：

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

想象一下这个场景：

组件：

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

模板：

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

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

所以回答你的问题：

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

一个。 as 关键字使您的代码看起来不错，但更重要的是它确保您只对给定的 observable 使用一次异步，如上所述。

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

一个。 let 是一个 Javascript 关键字。 as 关键字只能被 Angular 模板编译器识别。两者都做同样的声明和初始化变量的工作。在某些地方，比如*ngFor，两者都是可以替换的。但在*ngIf 的情况下，它需要一个布尔变量，而let x = true 不返回布尔值，所以你只能使用as。

问。 users对象和userModel对象有什么区别

一个。这已经回答了。 users 对象是 Observable，userModel 对象是 users Observable 的解析值。