在Angular中将Signal作为组件Input传入是否符合规范？

我在以下模拟示例中将Signal作为组件的Input传入，代码可正常运行，但不确定这是否是Signal的正确用法，感觉有些奇怪。另外我知道FriendDetailComponent本应更“轻量化（哑组件）”，直接接收好友详情作为输入即可（无需使用Signal），但这个模拟示例是为了说明我在更复杂场景中遇到的类似模式。

维护好友列表的服务 #

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,
    },
  ]);
}

展示特定好友详情的Friend Detail组件 #

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');
}

这种用法是Angular官方允许的，但并非最优实践，具体分析如下：

1. 官方支持性 #

Angular 16及以上版本确实允许将Signal作为@Input传入组件，当父组件的Signal值更新时，子组件的输入Signal会自动同步，你的代码能正常运行也验证了这一点。

2. 存在的问题与优化方向 #

• 耦合性过高：FriendDetailComponent同时依赖输入Signal和服务获取数据，违背了组件职责单一原则，在复杂场景中会导致组件难以测试和维护。
• Signal嵌套冗余：父组件传入Signal，子组件再基于它创建computed Signal，这种模式可以简化。

更合理的优化方案 #

方案一：轻量化哑组件（推荐）

父组件负责从服务中筛选数据，直接将好友对象传递给子组件，子组件仅负责展示：

父组件优化后代码

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

@Component({
  selector: 'app-some-component',
  template: `<app-friend-detail [friend]="selectedFriend()"></app-friend-detail>`,
})
export class SomeComponent {
  selectedName = signal<string>('Julie');
  selectedFriend = computed(() => {
    return this.myFriendsService.myFriends().find(f => f.name === this.selectedName()) || {name: '', age: 0};
  });

  constructor(private myFriendsService: MyFriendsService) {}
}

子组件优化后代码

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

@Component({
  selector: 'app-friend-detail',
  templateUrl: './friend-detail-component.html',
})
export class FriendDetailComponent {
  @Input() friend!: MyFriend;
}

方案二：输入自动转为Signal（复杂场景可选）

如果必须在子组件中处理输入的动态变化，可以用Angular的输入转换器自动将普通值转为Signal，避免手动传递Signal：

import { Component, Input, computed, signal, 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({ transform: signal }) name!: Signal<string>;
  
  friendDetail = computed<MyFriend>(() => {
    return this.myFriendsService.myFriends().find(f => f.name === this.name()) || {name: '', age: 0};
  });

  constructor(private myFriendsService: MyFriendsService) {}
}

内容的提问来源于stack exchange，提问作者brando