在 Angular 中使用信号作为组件输入可以吗？

Question

在下面的模型中，我使用信号作为组件的输入。有用。但我想知道这是否是信号的正确使用。看起来……很奇怪。

以下是维护“我的朋友”列表的服务：

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

export interface MyFriend {
  name: string;
  age: number;
}

@Injectable({
  providedIn: 'root'
})
export class MyFriendsService {
  myFriends = signal < MyFriend[] > ([{
      name: 'Bob',
      age: 34,
    },
    {
      name: 'Julie',
      age: 30,
    },
    {
      name: 'Martin',
      age: 25,
    },
  ]);
}

以下是一个好友详细信息组件，显示特定好友的详细信息：

import {
  Component,
  Input,
  computed,
  signal
} from '@angular/core';
import {
  MyFriend,
  MyFriendsService
} from './my-friends.service';

@Component({
  selector: 'app-friend-detail',
  templateUrl: './friend-detail-component.html',
})
export class FriendDetailComponent {
  @Input() name = signal('Bob');
  friendDetail = computed < MyFriend > (() => {
    const friend = this.myFriendsService
      .myFriends()
      .filter((friend) => friend.name === this.name());
    if (friend.length > 0) {
      return friend[0];
    }
    return {
      name: '',
      age: 0,
    };
  });
  constructor(private myFriendsService: MyFriendsService) {}

以下组件仅使用 FriendDetailComponent：

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

@Component({
  selector: 'app-some-component',
  template: `<app-friend-detail [name]="selectedName"></app-friend-detail>`,
})
export class SomeComponent {
  selectedName = signal < string > ('Julie');
}

正如我所说，这有效。但是......这是使用角度信号的正确方法吗？

仅供参考，我意识到 FriendDetailComponent 应该更加“愚蠢”，只接受 FriendDetail 信息的输入（它不需要使用信号）......但我做了这个模型作为解释我陷入的模式的一种方式更复杂的情况的背景。

Answer 1

编辑：自Angular 17.2起可用的模型输入

信号的第 2 阶段（或者可能是第 3 阶段）将引入signal: true组件，其中包括双向绑定。

RFC https://github.com/angular/angular/discussions/49682在 下对此进行了描述Model inputs。

简而言之（API 可能会发生变化），您将能够定义一种特殊类型的输入，可以将其作为信号进行操作，但将以两种方式绑定回父级。

但您不会直接传递信号，它只会在组件内部显示为信号。

如果您现在尝试将信号传递给组件，则可以通过服务或仅设置为评估信号值的普通输入来实现。