Angular 19：如何双向绑定ComponentA字段与ComponentB的parameters

要实现ComponentA的四个字段与ComponentB的parameters双向同步，核心是利用Angular的Signal和Effect机制完成双向数据同步，结合model()的双向绑定能力，具体步骤如下：

1. 修改ComponentA，添加双向同步逻辑 #

在ComponentA中创建对应Parameters类型的signal，并通过两个effect分别处理单个字段同步到parameters和parameters同步回单个字段的逻辑，同时处理类型转换（ComponentA的skip/top是number，而Parameters中对应字段是string）：

import { Component, model, effect } from '@angular/core';
import { ComponentB } from './b.component';
import { Parameters } from './parameters';

@Component({
    selector: 'app-a',
    templateUrl: './a.component.html',
    standalone: true,
    imports: [ComponentB]
})
export class ComponentA {
    public readonly filter = model<string>('');
    public readonly orderby = model<string>('');
    public readonly skip = model<number>(0);
    public readonly top = model<number>(10);

    // 创建用于与ComponentB绑定的parameters signal
    public readonly parameters = model<Parameters>({
        filter: this.filter(),
        orderby: this.orderby(),
        skip: this.skip().toString(),
        top: this.top().toString()
    });

    constructor() {
        // 监听单个字段变化，同步到parameters
        effect(() => {
            this.parameters.set({
                filter: this.filter(),
                orderby: this.orderby(),
                skip: this.skip().toString(),
                top: this.top().toString()
            });
        });

        // 监听parameters变化，同步回单个字段
        effect(() => {
            const params = this.parameters();
            if (params.filter !== undefined) this.filter.set(params.filter);
            if (params.orderby !== undefined) this.orderby.set(params.orderby);
            
            if (params.skip !== undefined) {
                const skipNum = parseInt(params.skip, 10);
                this.skip.set(isNaN(skipNum) ? 0 : skipNum);
            }
            if (params.top !== undefined) {
                const topNum = parseInt(params.top, 10);
                this.top.set(isNaN(topNum) ? 10 : topNum);
            }
        });
    }
}

2. 修改ComponentA模板，完成双向绑定 #

直接将ComponentA的parameters signal通过Angular双向绑定语法绑定到ComponentB：

<app-b [(parameters)]="parameters"></app-b>

3. ComponentB无需修改 #

ComponentB中用model<Parameters>()定义的parameters已经自动支持双向绑定——Angular会为其生成对应的@Input()输入属性和@Output() parametersChange输出事件，[(parameters)]语法会自动处理数据的双向传递。

关键说明 #

• Effect的自动跟踪：两个effect会自动跟踪依赖的signal变化，当ComponentA的单个字段或ComponentB的parameters发生修改时，自动触发同步逻辑。
• 类型转换处理：因为Parameters中的skip/top是string类型，而ComponentA中对应字段是number，同步时需做字符串与数字的转换，并处理解析失败的默认值（比如非数字字符串转为0/10）。

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