当 Resource API 首次问世时，resource 函数传回一个 promise，而 rxResource 函数只传回 Observable 的第一个值。在 rxResource 函数中尤其明显，当

rxResource({
request : this.num,
loader: ({ request: n }) => timer(0, 1000).pipe(take(n))
})

发出一个整数并且结束，而不是 n 个整数。

幸运的是，资源 API 将支援串流传输，其中函数可以在 Angular 19.2.0 中传回多个回应。

rxResource 函数的选项保持不变，但 resource 函数有一个新的选项, stream, 来支援串流。

在这篇文章中，我将示范如何使用 rxResource 和 resource 函数来串流传输表格行。

自订 makeARow RxJS 运算子

function makeRows(numRows: number, numElementsPerRow: number) {
return function (source: Observable<number>) {
return source.pipe(
tap((i) => console.log(\'timer called\', i)),
map((num) => Array(numElementsPerRow).fill(0).map((_, index) => (num * numElementsPerRow + index) + 1)),
take(numRows),
)
}
}

makeRows 自订运算子会填入数字数组，并在填入指定数量的行后取消订阅。

使用 rxResource 函数串流数据

@let rxResourceTitle = \'Aggregate table rows with rxResource stream\';
<ng-container [ngTemplateOutlet]="table" [ngTemplateOutletContext]="{ $implicit: tableDataRxResource, title: rxResourceTitle }"/>

<ng-template #table let-tableResource let-title="title">
<p>{{ title }}</p>
@for (row of tableResource.value(); track $index) {
<div>
@for (data of row; track data; let last=$last) {
@let delimiter = last ? \'\' : \', \';
<span>{{ `${data}${delimiter}` }}</span>
}
</div>
}
</ng-template>

在 HTML 范本中，我建立了一个 NgTemplate 来显示表格行和静态标题。 在 ng-container 元素中，我将模板变数 table 指派给 ngTemplateOutlet 输入。此外，我将静态标题和资源值指派给 ngTemplateOutletContext 输入。

@Component({
selector: \'app-root\',
imports: [NgTemplateOutlet],
templateUrl: \'main.component.html\',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class App {
rowSub = new Subject<number[]>();
table$ = this.rowSub.pipe(
scan((acc, values) => ([...acc, values]), [] as number[][]),
);

tableDataRxResource = rxResource({
loader: () => this.table$,
});

constructor() {
timer(0, 1000)
.pipe(makeRows(10, 10))
.subscribe({
next: (array) => this.rowSub.next(array)
});
}
}

rowSub 是一个发出数字数组的 Subject。 当 rowSub 发出新阵列时，table$ Observable 使用 scan RxJS 运算子将其附加到巢状阵列中。

tableDataRxResource 资源由 rxResource 函数建立。此资源有一个 loader，可在表格行到达时进行串流传输。

RxJS timer 在建构函式中每秒产生一个新行，并在第十次后停止。 当 Observable 订阅时，结果会回馈给 rowSub Subject。

使用 resource 函数串流数据

<ng-container [ngTemplateOutlet]="table" [ngTemplateOutletContext]="{ $implicit: tableDataResource, title: \'Aggregate table rows with resource stream\' }"/>

<ng-template #table let-tableResource let-title="title">
<p>{{ title }}</p>
@for (row of tableResource.value(); track $index) {
<div>
@for (data of row; track data; let last=$last) {
@let delimiter = last ? \'\' : \', \';
<span>{{ `${data}${delimiter}` }}</span>
}
</div>
}
</ng-template>

ng-container 使用相同的模板但具有不同的 resource 和静态图块。

table = signal<{ value: number[][] }>({ value: [] });

The table signal holds an object with a value property. The property stores a nested number array.

tableDataResource = resource({
stream: async () => this.table,
});

tableDataResource 资源使用 resource 函数来串流传输表格行。 stream 选项是新的，并且需要一个返回讯号 (signal) 的非同步函数 (async function)。

@Component({
...
})
export class App {
table = signal<{ value: number[][] }>({ value: [] });

tableDataResource = resource({
stream: async () => this.table,
});

constructor() {
timer(0, 1500)
.pipe(makeRows(10, 10))
.subscribe({
next: (array) =>
this.table.update(({ value }) => ({ value: [...value, array] }))
});
}
}

RxJS timer 订阅并将新的数字数组附加到 table 讯号。

resource 函数 与 rxResource 函数演示相同的结果；每秒新增一行。

参考：

  • PR: https://github.com/angular/angular/pull/59573
  • Resource API: https://angular.dev/guide/signals/resource
  • Stackblitz Demo: https://stackblitz.com/edit/stackblitz-starters-doif2hds?file=src%2Fmain.ts
  • Tech Stack Nation Resource Streaming: https://www.youtube.com/watch?v=tV9nEZR_PR4&t=33s
  • Tech Stack Nation Resource Streaming use cases: https://www.youtube.com/watch?v=GPLnR6PQCWA