Angular中兄弟组件间同步尺寸的最优实现方案

方案1：通过值比对避免重复绘制 #

在KidComponent的width setter中，仅当传入的宽度值与当前内部存储的_width不一致时，才执行赋值和绘制逻辑。这样父组件同步相同值时，不会触发重复绘制。

修改kid.component.ts：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'app-kid',
    templateUrl: './kid.component.html',
})
export class KidComponent {
    @Input() set width(w: number) {
        // 仅当值变化时才更新并绘制
        if (w !== this._width) {
            this._width = w;
            this.draw();
        }
    }
    @Output() widthChange = new EventEmitter<number>();

    private _width = 100;

    onUserResize(newWidth: number) {
        this._width = newWidth;
        this.draw();
        this.widthChange.emit(newWidth);
    }

    draw() {
        // Drawing code
    }
}

优点：实现简单，无额外依赖，兼容单独使用和父组件嵌套场景。
缺点：若业务中存在需要强制重绘相同值的场景，需额外处理。

方案2：标记变化来源精准控制绘制 #

添加一个内部状态标记，区分宽度变化是用户主动触发还是父组件同步触发，仅在非用户主动触发时执行setter中的绘制逻辑。

修改kid.component.ts：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'app-kid',
    templateUrl: './kid.component.html',
})
export class KidComponent {
    @Input() set width(w: number) {
        // 仅当非自身触发的变化时才更新绘制
        if (!this.isSelfInitiated) {
            this._width = w;
            this.draw();
        }
    }
    @Output() widthChange = new EventEmitter<number>();

    private _width = 100;
    private isSelfInitiated = false;

    onUserResize(newWidth: number) {
        this.isSelfInitiated = true;
        // 自身触发时直接更新并绘制
        this._width = newWidth;
        this.draw();
        this.widthChange.emit(newWidth);
        // 在下一次变更检测周期前重置标记
        setTimeout(() => this.isSelfInitiated = false, 0);
    }

    draw() {
        // Drawing code
    }
}

优点：精准控制绘制时机，避免不必要的判断逻辑。
缺点：需要维护额外的状态标记，依赖异步重置确保标记正确。

方案3：重构为受控/非受控组件模式 #

通过@Input()的可选配置，让组件支持两种模式：

• 受控模式：由父组件完全控制宽度，组件仅负责触发变更事件，不自行维护状态。
• 非受控模式：组件自行维护宽度状态，可独立使用。

修改kid.component.ts：

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';

@Component({
    selector: 'app-kid',
    templateUrl: './kid.component.html',
})
export class KidComponent implements OnInit {
    // 受控模式：父组件传入width
    @Input() width?: number;
    // 非受控模式：默认宽度
    @Input() defaultWidth = 100;
    @Output() widthChange = new EventEmitter<number>();

    private _internalWidth = 100;

    ngOnInit() {
        // 初始化时根据是否传入width决定模式
        if (this.width !== undefined) {
            this._internalWidth = this.width;
        } else {
            this._internalWidth = this.defaultWidth;
        }
        this.draw();
    }

    // 监听受控模式下的width变化
    @Input() set width(w: number | undefined) {
        if (w !== undefined && w !== this._internalWidth) {
            this._internalWidth = w;
            this.draw();
        }
    }

    onUserResize(newWidth: number) {
        this._internalWidth = newWidth;
        this.draw();
        this.widthChange.emit(newWidth);
        // 非受控模式下无需父组件同步，自身已更新
    }

    draw() {
        // Drawing code
    }
}

使用方式：

• 受控模式（父组件同步）：

<app-kid [(width)]="width"></app-kid>

• 非受控模式（单独使用）：

<app-kid [defaultWidth]="150"></app-kid>

优点：明确区分两种使用场景，逻辑清晰，扩展性强。
缺点：代码量稍大，需要额外处理初始化逻辑。

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