Angular中能否仅在属性定义时才渲染该元素属性？

当然可以实现！这个问题的核心在于Angular对属性绑定值为null或undefined时的处理逻辑——当你使用属性绑定语法（方括号[]）时，如果绑定的值是null或undefined，Angular会自动从DOM元素上移除对应的HTML属性。我们只需要调整一下组件的输入定义和模板绑定即可。

方法一：将name设为可选输入并使用原生属性绑定 #

首先，修改组件的@Input定义，把name标记为可选属性（这样未传入时它的值会是undefined）：

export class ButtonComponent {
  /** The name id to be given to the button */
  @Input() id: string;
  /** The name to be given to the button */
  @Input() name?: string; // 添加?标记为可选属性
}

然后保持模板的绑定不变：

<button [id]="id" [name]="name">
  <ng-content></ng-content>
</button>

此时当你不传入name时，name的值为undefined，Angular会自动移除按钮上的name属性，最终渲染出你想要的结果：

<button _ngcontent-c1="" id="login"> Login </button>

方法二：使用属性绑定+空值合并运算符（更稳妥） #

如果你想避免因TypeScript编译选项或Angular版本差异导致的问题，可以直接在模板里使用[attr.name]绑定，并通过空值合并运算符确保未传入时返回null：

<button [id]="id" [attr.name]="name ?? null">
  <ng-content></ng-content>
</button>

同时组件的@Input可以保持不变（或设为可选）：

export class ButtonComponent {
  @Input() id: string;
  @Input() name?: string;
}

这个方法的原理是：当name为undefined或null时，name ?? null会返回null，而Angular在绑定[attr.name]到null时，会直接移除该属性。

方法三：给name设置null默认值 #

你也可以在组件里直接给name设置默认值为null，这样未传入时它的值就是null，Angular同样会移除对应的属性：

export class ButtonComponent {
  @Input() id: string;
  @Input() name: string | null = null; // 设置默认值为null
}

模板绑定保持[name]="name"即可，效果和前两种方法一致。

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