至今头条

Angular 18+ 高级教程 – Component 组件 の @let Template Local Variables

2024-06-27 15:47 由 兴杰 发表于 #前端开发

前言

Angular 在 v18.1 推出了 Template 新语法 @let。

这个 @let 和上一篇教的 Control Flow @if, @for, @swtich, @defer 语法上类似，但是用途却差很多。

如果要给它们分类的话，@if @for @switch 可以算一类，@defer 独立一类，@let 又是独立一类，总之大家不要混淆就是了。

 

没有 @let 的日子

我们先来看看没有 @let 的日子里，我们都遇到了哪些不方便。

Long path access

App 组件

export class AppComponent {
  person = signal({
    name: 'Derrick',
    address: {
      country: 'Malaysia',
      state: 'Johor',
      postalCode: '81300'
    }
  })
}

有一个 person 对象，它里面又有一个 address 对象。

App Template

<p>{{ person().name }}</p>
<p>{{ person().address.country }}</p>
<p>{{ person().address.state }}</p>
<p>{{ person().address.postalCode }}</p>

上述代码最大的问题就是 person().address 一直重复，代码很长，很丑。

倘若在 JS 里的话，我们一定会 declare 一个 variable 把 address 对象装起来，像这样访问

const address = person.address;
console.log(address.country);
console.log(address.state);
console.log(address.postalCode);

没有一直重复 person.address 干净多了。

但是在 Template 里，我们无法 declare variable，能 declare variable 的只有组件

export class AppComponent {
  person = signal({
    name: 'Derrick',
    address: {
      country: 'Malaysia',
      state: 'Johor',
      postalCode: '81300'
    }
  });
  address = computed(() => this.person().address);
}

App Template

<p>{{ person().name }}</p>
<p>{{ address().country }}</p>
<p>{{ address().state }}</p>
<p>{{ address().postalCode }}</p>

虽然 path 是短了，但是组件却为了 View 而多了一个 property，这样的职责分配合理吗？

再说，如果是在 @for 里面

@for (person of people(); track person.name) {
  <p>{{ person.name }}</p>
  <p>{{ person.address.country }}</p>
  <p>{{ person.address.state }}</p>
  <p>{{ person.address.postalCode }}</p>
}

组件 property 也无法解决这个问题丫。

the hacking way

有些人会用 hacking way 来做到这一点，像这样

@for (person of people(); track person.name) {
  <p>{{ person.name }}</p>

  @if (person.address; as address) {
    <p>{{ address.country }}</p>
    <p>{{ address.state }}</p>
    <p>{{ address.postalCode }}</p>
  } 
}

虽然 path 是短了，但是 @if 是这样用的吗？这种不顺风水的用法，随时会掉坑里的，忌讳啊。

Async pipe

App 组件

export class AppComponent {
  value$ = of('hello world');
}

有一个 value stream。

App Template

<header>
  <p>{{ value$ | async }}</p>
</header>
<main>
  <p>body</p>
</main>
<footer>
  <p>{{ value$ | async }}</p>
</footer>

我要在 header 和 footer 显示这个 value。

上述代码有两个问题：

  1. 两次 pipe async 会导致 value stream 被 subscribe 两次。

    如果这个 value 需要发 ajax，那它就会发 2 次 ajax。

  2. 不管是使用什么 pipe 都好，每一次使用 value 都要重复同样的 pipe，这就不合理。

    而，倘若我们把职责交给组件，那组件就需要使用 pipe，这样也不合理。

    总之，怎样都不合理，这就是一个设计失误。

总结

Angular 对 Template 限制太多了，以至于许多简单的 View 逻辑无法在 Template 里完成，必须转交给不合适的组件，或者大费周章的指令去完成。

这也是为什么这个 issue 能常年霸榜

幸好，在经历了 2657 个日夜🙄，Angular 团队终于解决了上述这些问题。这就是本篇的主角 -- @let。

 

@let 的使用方式

@let 允许我们在 Template 里 declare variables，就这么一个简简单单的功能。

@let value = 'hello world';
<h1>{{ value }}</h1>

效果

@let 的语法

@let 开头

跟着一个 variable name

然后等于 = 

然后一个 Angular Template 支持的 expression。

最后 ends with ; 分号

@let 解决 long path access 问题

@for (person of people(); track person.name) {
  <p>{{ person.name }}</p>

  @let address = person.address;

  <p>{{ address.country }}</p>
  <p>{{ address.state }}</p>
  <p>{{ address.postalCode }}</p>
}

瞬间干净了😊

@let 解决 pipe async 问题

@let value = value$ | async;

<header>
  <p>{{ value }}</p>
</header>
<main>
  <p>body</p>
</main>
<footer>
  <p>{{ value }}</p>
</footer>

只有一次 pipe async，所以只会 subscribe 一次，完美😊

 

@let 的特性

@let 的语法和意图都很简单，所以使用上是没有什么问题的，只是有一些特性大家还是需要知道，避免掉坑。

Must delcare in Template top layer

下面这样直接报错

<div class="container">
  @let value = 'Hello World';
  <p>{{ value }}</p>
</div>

因为 @let 只能 declare 在 Template 的最上层。但不要误会哦，最上层的意思不是说要在第一行，只要不是被 element wrap 起来就可以了。

下面这样是 ok 的

<h1>Hello World</h1>

@let value = 'Hello World';
<p>{{ value }}</p>

Immuable

虽然它叫 @let，但是它是不可以被赋值的。

下面这样直接报错

<h1>Hello World</h1>

@let value = 'Hello World';
<p>{{ value }}</p>

<button (click)="value = 'new value'">update value</button>

不要问我为什么 svelte 叫 @const 🤷‍♂️

Angular 团队给出的解释是

const 代表这个值永远不会变，但是如果我们这样 declare

@let fullName = firstName() + ' ' + lastName();

每一次 renderView 后，fullName 的 value 都有可能不一样，所以他们认为叫 @let 比较合理。

关键不是我们能不能改变这个 variable，而是这个 variable 的值会不会被改变，大家看的角度不同。

@let = signal 可以赋值？

如果 @let 的值是 signal，我们当然可以调用 WritableSignal.set 方法给 signal 赋值。

因为这不是赋值给 @let 而是赋值给 signal。

App 组件

export class AppComponent {
  $value = signal('default value');
}

App Template

@let value = $value;
<p>{{ value() }}</p>
<button (click)="value.set('new value')">update value</button>

效果

但是！请不要妄想利用这个特性让 @let 实现 mutable。

App 组件

export class AppComponent {
  signal = signal;
}

把 signal 函数传给 Template

App Template

@let value = signal('default value');
<p>{{ value() }}</p>
<button (click)="value.set('new value')">update value</button>

表明上看，只要把 signal 函数传给 Template，在 Template @let 时使用 signal，这样 @let 就好像等同于 mutable 了。

效果

虽然成功显示了 default value，但是点击 button 并不会修改成 new value。why?

原理我们留到下面逛源码时解答。

Duplicated declare

同样的 variable name 不可以重复 declare，下面这样直接报错。

@let value = 'value';
@let value = 'new value';

也不应该撞 Template Variables

@let value = 'hello world';
<input #value>
{{ value }}

最终会使用 @let 还是 input ref 我不晓得，目前 18.1.0-next.4 好像有 Bug。

也不应该撞组件属性

export class AppComponent {
  value = 'component value';
}
@let value = 'hello world';

{{ value }}

虽然它不会报错，优先显示的是 @let 的值，但是撞名字始终不是好现象，能免则免吧。

Template as scope

@let 是有 scope 概念的，每一个 Template 都可以 declare 属于自己 scope 的 @let

@let value1 = 'one';

<ng-template #template>
  @let value2 = 'two';

  <p>{{ value1 }}</p>
  <p>{{ value2 }}</p>
</ng-template>

<ng-container [ngTemplateOutlet]="template" />

效果

里面有几个知识点：

  1. 子层可以访问父层的 @let

    比如，在 ng-template 里可以使用 value1。

    当然，反过来就不行，ng-temaplte 外不可以使用 value2。

  2. 父层和子层可以 declare 相同的 variable name，子层会胜出。

    @let value1 = 'one';
<ng-template #template>
  @let value1 = 'two';
  <p>{{ value1 }}</p> <!-- will be two -->
</ng-template>

    注：目前 18.1.0-next.4 好像有 Bug。

When will @let be updated?

@let 属于 LView，当 LView refresh 时，它就会被刷新。下一 part 逛源码时会看到这一点。

 

逛一逛 @let 源码

App Template

@let value = 'Hello World'
<p>{{ value }}</p>

compile

yarn run ngc -p tsconfig.json

app.component.js

在 renderView 阶段，有一个 ɵɵdeclareLet。

在 refreshView 阶段 declare variable with 'Hello World'，然后把 variable 传给 ɵɵtextInterpolate。

所有工作 compiler 做完了。runtime 执行 refreshView 就可以了。

我们这个例子太过简单，ɵɵdeclareLet 其实可有可无，可以看到 refreshView 里的代码已经足够渲染出正确的画面了。

我们来一个比较复杂的例子

@let name = person().name;
<p>{{ name }}</p>

<ng-template>
  <p>{{ name }}</p>
</ng-template>

主要是多了一个 ng-template，在 ng-template 内使用到了父层的 @let name。

app.component.js

首先是 renderView 阶段 ɵɵdeclareLet 函数的源码在 let_declaration.ts

store 函数的源码 storage.ts

renderView 阶段主要做了两件事，

第一件是创建 TNode 插入到 App TView.data 里。

第二件是插入一个初始值到 App LView 里。

接着到 refreshView 阶段

ɵɵstoreLet 函数的源码在 let_declaration.ts

这时会把 App 组件实例的值写入 LView @let 的位置。

我们看回 App template 方法 refreshView 的部分

name_r2 的 value 就是 'Derrick'，然后它被传给了 ɵɵtextInterpolate。

也就是说，到目前位置，上面记入到 TView LView 里的资料都没有人在用。

正真会从 LView 里取出 @let value 来使用的人是子层 ng-template 里的 {{ name }}

我们看看它 compile 后的 template 方法。

renderView 阶段和 @let 毫无关系。

refreshView 阶段，ɵɵnextContext 函数我们以前讲解过。

它主要是设置了当前 LView (ng-template LView) 的 contextLView

这个 contextLView 就是 ng-template LView 的 declaration view 也就是 App LView。

接着是 ɵɵreadContextLet 函数，它的源码在 let_declaration.ts

简单说就是去父层 LView 拿出 @let value。

总结

  1. 在 App Template 里 declare @let。

  2. renderView 阶段

    它会创建 @let TNode，存放在 App TView.data 里。

    它会创建 @let initial value，存放到 App LView 里。

  3. refreshView 阶段

    它会从 App 实例获取到 @let value，然后 update App LView 里的 @let value。(注：从这里也可以看出，假如 @let = complex formula 是会影响性能的，因为每一次 refreshView 它都会重跑 formula)

  4. LView 里的 @let value 并不是给当前 LView binding 使用的，当前 binding 会直接用 const variable。

  5. LView 里的 @let 是给子层 LView binding 使用的。

    子层 LView 在 refreshView 时会透过 contextLView 来到父层 LView，然后取出 @let value。

解答 @let = signal 可以赋值？

上一 part 我们留了一道问题。

App 组件

export class AppComponent {
  signal = signal;
}

把 signal 函数传给 Template

App Template

@let value = signal('default value');
<p>{{ value() }}</p>
<button (click)="value.set('new value')">update value</button>

为什么点击 button 后没有变成 'new value'？

其实很好理解：

  1. 当 refreshView 的时候 @let value 会获得一个新的 signal，value 是 'default value'。

  2. {{ value() }} 会渲染出 'default value'。

  3. 点击以后 value signal 会被赋值 'new value'。

  4. 同时会触发新一轮的 refreshView。

  5. 结果新一轮的 refreshView 又重新给 @let value 一个新的 signal，value 是 'default value'。

  6. 这样就轮回了，所以 {{ value() }} 永远不可能渲染出 'new value'。

 

总结

本篇简单的介绍了 Angular v18.1 推出的 @let 新模板语法。它主要的功能是让我们能在 Template declare variables，这能让代码变得更干净，职责管理更分明。

它主要是靠 compiler 实现的，runtime 中，它只是在 LView 做一些记入，然后使用它，这样而已。

 

 

目录

上一篇 Angular 18+ 高级教程 – Component 组件 の Control Flow

下一篇 Angular 18+ 高级教程 – NgModule

想查看目录，请移步 Angular 18+ 高级教程 – 目录

喜欢请点推荐👍，若发现教程内容以新版脱节请评论通知我。happy coding 😊💻

 

热门相关：全民女神：重生腹黑千金   医道至尊   99次离婚：厉少，请低调   别人的妻子   别吃那个鬼