Angular 信号：编程信号量

发布于04月25日

当条件更改(变为true)时，我想只运行一次操作，例如

areAllDetailsLoaded() => run a function

我想将其编码为Signal，就像

areAllDetailsLoaded=signal(false);

并将其用作

effect( () =>  {
   if (areAllDetailsLoaded()) {
          storage().getDetails() ....... run code

我面临的问题是，显然Signal storage也被考虑在内，并且每当storage()更改时，代码就会运行.这不是我想要的.areAllDetailsLoaded更改为true后，代码应只运行一次.

老实说，我已经没有 idea 了.或者也许我对Angular 信号的理解还不够好.因此，锅炉模板模式将受到欢迎--适合Signals.

推荐答案

我发现了一些非常好的观察结果.

只有顶层的信号读取才会触发该效果，不确定是否是设计的.
该效果返回一个引用，并具有 destruct 属性来 destruct 该效果并确保信号只运行一次！

完整代码:完整代码:

import { Component, effect, signal } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <button (click)="areAllDetailsLoaded.set(true)">areAllDetailsLoaded set true</button>
  `,
})
export class App {
  areAllDetailsLoaded = signal(false);
  storage = signal(false);
  name = 'Angular';

  constructor() {
    const effectRef = effect(() => {
      console.log('effect runs');
      // const storage1 = this.storage(); // un comment this to see the effect running for each change of storage
      if (this.areAllDetailsLoaded()) {
        const storage = this.storage();
        console.log('code runs');
        effectRef?.destroy();
      }
    });
  }

  ngOnInit() {
    setInterval(() => {
      this.storage.set(!this.storage());
      console.log('interval', this.storage());
    }, 1000);
  }
}

bootstrapApplication(App);

Stackblitz Demo