Angular2中如何将setter类型的@Input标记为可选输入属性

Setter类型@Input标记可选的实现方式 #

你可以通过以下两种常用方案实现，同时满足TypeScript类型校验和Angular的输入规则：

方案1：全版本兼容写法

直接修改setter的入参类型，允许接收undefined，同时在逻辑内补充边界判断即可：

@Input()
public set baz(val: number | undefined): void {
    // 未传入参数时的边界处理，可根据业务需求补充默认逻辑
    if (val === undefined) return;
    // 原有业务代码
}

如果组件内部需要读取该属性的值，可以配套声明私有存储变量和对应getter，保持类型一致即可：

private _baz?: number;

@Input()
public set baz(val: number | undefined) {
    if (val !== undefined) {
        this._baz = val;
    }
}

public get baz(): number | undefined {
    return this._baz;
}

方案2：Angular 16+ 简化写法

Angular 16及以上版本为@Input新增了required配置项，你可以显式指定非必填，同时给入参加可选修饰符?，写法更贴合普通可选属性的风格：

@Input({ required: false })
public set baz(val?: number): void {
    if (val !== undefined) {
        // 业务逻辑
    }
}

注意：无论用哪种方案，都需要在setter逻辑内做好undefined的判断处理，避免未传参时执行逻辑报错。

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