如何根据 Angular 17.1 中的输入信号更新信号

Question

我有一个使用信号实现的角度服务。

    export class MyService {
        private idSignal = signal(0);
        setId(id: number) { 
            this.idSignal.set(id);
        }
    }

我有一个注入此服务的组件。该组件有一个名为 id 的必需输入：

    export class MyComponent {
       private service = inject(MyService);
       id = input.required<number>();
    }

我想根据组件中输入的id值来设置服务上的id。我考虑的一种选择是使用效果，但不建议在效果内设置信号值。我该如何做到这一点而不破坏最佳实践，并可能导致循环依赖。

Answer 1

您可以使用转换属性来执行与服务的同步，请参阅下面的工作示例！

测试

import { Component, input, OnInit, signal } from '@angular/core';
import { TestService } from '../test.service';

@Component({
  selector: 'app-test',
  template: `
    input: {{ input() }}<br/>
    from Service: {{fromServiceInput()}}
  `,
  standalone: true,
})
export class TestComponent implements OnInit {
  input = input.required({
    transform: (data: string) => {
      this.testService.input.set(data);
      return data;
    },
  });

  get fromServiceInput() {
    return this.testService.input;
  }
  constructor(private testService: TestService) {}

  ngOnInit() {}
}

服务

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

@Injectable({
  providedIn: 'root',
})
export class TestService {
  input = signal('');
  constructor() {}
}

main.ts

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TestComponent],
  template: `
    <app-test [input]="name"/>
  `,
})
export class App {
  name = 'Angular';
  ngOnInit() {
    setInterval(() => {
      this.name = Math.random().toString();
    }, 1000);
  }
}

bootstrapApplication(App);

堆栈闪电战