嗨！奥斯汀你好吗？嗯，你干嘛呢？

概述

我将介绍一些使用 Angular 16 中预计包含的新原始信号的具体示例！

信号是什么？

这是Angular框架为了高效检测变更而引入的新的响应性原语。

SolidJS的signal与概念是相同的，非常简单。 Signal具有以下两个特点。

SolidJS的信号与概念相同，并且非常简单。Signal具有以下两个特征。

1. 具有保持数值的能力

具有在数值发生变化时发出信号的能力

将上述的两个特点应用于Angular，就可以轻松地将同步处理反映到模板中。

请阅读以下文章以了解有关Signal和Angular变更的详细信息。

以试验性使用Signal API的方法

如果有人仍然想要使用Signal！实际上，Angular团队已经将其作为POC实施并发布了！

要使用@angular/cli@16.0.0，必须使用它。

由于版本经常试验性地更改，所以请通过npm来确认当前最新版本。

从上面的npm页面获取最新版本后，将其输入以下命令并执行，即可创建一个Angular 16项目。

npx -p @angular/cli@16.0.0-next.6 ng new signals-play

使用信号作为组件和模板

让我们在app.component.ts中尝试导入信号。

import { Component, signal } from '@angular/core';

在这里有补充说明，但标注为@developerPreview。

如果我们将初始值分配到以下的变量中，它会帮我们推断出变量的类型。

import { Component, signal } from '@angular/core';

@Component({
...
})
export class AppComponent {
  clickCount = signal(0);

  addClick() {
    this.clickCount.update((clicks) => clicks + 1);
    // OR
    this.clickCount.set(this.clickCount() + 1);
  }
}

在模板中可以按以下方式显示当前值。模板会将clickCount作为一个函数调用，并获取当前的值。

<h1>Count: </h1>
<p>{{ this.clickCount() }}</p>

<button (click)="this.addClick()" type="button">Add 2</button>

也许有一些有经验的人知道在模板中调用函数是很危险的，但Signal不会引起副作用，所以不必担心。

将会得到如下结果。

非常简单。

使用computed的方法

(Simplified Chinese: 使用computed的方法)

Signal只有两个作用，就是根据上述说明，它具有一个值并且在该值变化时通知这种变化。

然而，大多数同步处理都是基于值和值之间的计算。

在使用信号进行计算时，可以使用computed函数！

我将在下面的例子中介绍页面按钮。

import { Component, signal, computed } from '@angular/core';

@Component({
...
})
export class AppComponent {
  private itemCount = signal(124);
  private itemsPerPage = signal(10);
  currentPage = signal(0);
  pageCount = computed(() => Math.ceil(this.itemCount() / this.itemsPerPage()));
  canGoForward = computed(() => this.currentPage() < this.pageCount());
  canGoBack = computed(() => this.currentPage() !== 0);

  goForward() {
    if (!this.canGoForward()) return;
    this.currentPage.update((pageNo) => pageNo + 1);
  }

  goBack() {
    if (!this.canGoBack()) return;
    this.currentPage.update((pageNo) => pageNo - 1);
  }
}

在模板中，我们将上述逻辑应用到按钮属性上，具体如下所示。

<h1>Current Page</h1>
<p>{{ this.currentPage() }}</p>
<nav>
  <button (click)="this.goBack()" type="button" [disabled]="!this.canGoBack()">Back</button>
  <button (click)="this.goForward()" type="button" [disabled]="!this.canGoForward()">Next</button>
</nav>

结果 (jié guǒ)

非常简单而令人赞叹！ ér !)

总结

Angular的信号逐渐具体化，令人兴奋不已。

既然像上面提到的同步处理在每个逻辑中都变得非常简单，那真是帮了我大忙。

同时，由于Vue具有类似的语法结构，所以作者觉得很容易接受。

大家也请务必试一试！