角度链接信号依赖于另外两个信号

Question

在新的 Angular (19+) 中，我可以创建依赖于其他两个信号的 linkedSignal 吗？ 在示例中

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

const sourceSignal = signal(0);
const updatedSignal = linkedSignal({
  source: sourceSignal,
  computation: () => sourceSignal() * 5,
});

updatedSignal 取决于 sourceSignal。

我可以让它依赖于sourceSignal1和sourceSignal2吗？

Answer 1

是的，您可以指定

array

或

object

作为源函数的返回值。

使用对象：

首先我们应该定义一个接口，其中包含用于链接信号的输入信号，这个接口是必要的，以便我们可以严格键入用于触发链接信号反应性的对象。

export interface TypedLinkedSignal {
  sourceSignal: number;
  sourceSignal2: number;
}

我们可以返回一个

object

，其属性是各个项目，其中值是执行信号。

注意，我们可以使用计算函数的

first

参数是我们在源中指定的对象，但已执行信号且值可供使用。

我将第一个参数命名为

response

（您可以将其命名为任何名称）并使用这些值进行计算。

在下面的例子中。我们有两个

model

，它们是信号，我们将它们放置在一个对象内，该对象由

source

回调返回。最后我们使用返回的值来计算链接信号。

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { model, linkedSignal } from '@angular/core';
import { FormsModule } from '@angular/forms';

export interface TypedLinkedSignal {
  sourceSignal: number;
  sourceSignal2: number;
}

@Component({
  selector: 'app-root',
  imports: [FormsModule],
  template: `
    <input [(ngModel)]="sourceSignal"/>
    <input [(ngModel)]="sourceSignal2"/>
    <input [ngModel]="updatedSignal()"/>
  `,
})
export class App {
  sourceSignal = model(0);
  sourceSignal2 = model(0);
  updatedSignal = linkedSignal<TypedLinkedSignal, number>({
    source: () => ({
      sourceSignal: this.sourceSignal(),
      sourceSignal2: this.sourceSignal2(),
    }),
    computation: (params: TypedLinkedSignal) => {
      return params.sourceSignal * params.sourceSignal2 * 5;
    },
  });
}

bootstrapApplication(App);

Stackblitz 演示