Angular to Signal on Observables inside Signal

关键考虑因素:

1. 控件的值将发生变化，并且子控件应该适应控件状态的更新
2. 总是会有一个定义的表单控件，如果你仍然想使用null作为初始值，那么@if是必要的，否则你可以放弃html中的if条件！

控件是一个输入属性，因此它可以在将来更新，所以需要考虑到这一点.

1. 由于信号输入发生了变化，我使用effect来验证控件何时更新

2. 然后我订阅了信号控件的valueChanges observable，但确保将其存储在一个subscription对象中，为什么我这样做是因为当控件改变时，前一个值改变的订阅是无用的，所以我们需要清理它，我使用了一个if条件和一个unsubscribe.

3. 当控件的值发生变化时，我创建一个新的信号来存储控件的值，并设置值内的值变化

4. 最后，我添加了一个清理块，因为订阅在组件销毁后不应该存在.

5. 由于我们在效果中设置信号的值，所以我使用allowSignalWrites: true来允许这样做！

6. 我使用一个计算信号来执行任何需要的复杂计算，这里它只是标签(valueFromComplexCondition)的切换

完整代码

子元素

import { Component, input, effect, computed, signal } from '@angular/core';
import { ReactiveFormsModule, FormControl } from '@angular/forms';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-test',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
  @if(control(); as controlObj) {
    <input [formControl]="controlObj"/>
    <br/>
    valueFromComplexCondition: {{valueFromComplexCondition()}}
  }
  `,
  styleUrl: './test.component.css',
})
export class TestComponent {
  public readonly control = input<FormControl>(new FormControl());
  private subscription: Subscription = new Subscription();
  valueFromComplexCondition = computed(() =>
    this.value() === 'hello!' ? 'Correct' : 'incorrect'
  );
  private value = signal(this.control().value);

  constructor() {
    effect(
      (onCleanup: Function) => {
        if (this.subscription) {
          this.subscription.unsubscribe();
        }
        const control = this.control();
        if (control) {
          this.value.set(control.value);
          this.subscription = control.valueChanges.subscribe((val) => {
            console.log(val);
            this.value.set(val);
          });
        }

        onCleanup(() => {
          this.subscription.unsubscribe();
        });
      },
      {
        allowSignalWrites: true,
      }
    );
  }
}

母

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { TestComponent } from './app/test/test.component';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TestComponent],
  template: `
  
    <app-test [control]="!switcher ? formControlA : formControlB"/>
    <button (click)="switcher = !switcher">toggle controls {{switcher ? "formControlB" : "formControlA"}}</button>
    <br/>
    formControlA: {{formControlA.value}}
    <br/>
    formControlB: {{formControlB.value}}
  `,
})
export class App {
  name = 'Angular';
  switcher = false;
  formControlA = new FormControl('hello!');
  formControlB = new FormControl('hello world!');
}

bootstrapApplication(App);

Stackblitz Demo