Angular静态输入子组件未渲染输入值，为何需Setter？

一、为什么外部链接的href属性不生效？ #

你的tw-link组件同时绑定了[routerLink]和[attr.href]，但Angular的RouterLink指令会主动管理<a>标签的href属性——即使你把routerLink设为null，它在变更检测流程中仍会覆盖你通过[attr.href]设置的值，最终导致外部链接的href无法正常渲染。

而tw-button组件没有使用类似RouterLink的DOM干预指令，只是单纯绑定原生属性，所以静态输入能正常工作。

你可以暂时注释掉[routerLink]绑定验证这一点：此时外部链接的href会正常出现，说明是两个绑定之间的冲突导致了问题。

二、正确解决方案：拆分内部/外部链接渲染逻辑 #

不要在同一个<a>标签上同时绑定routerLink和href，而是用*ngIf区分两种场景，避免指令冲突：

<ng-container *ngIf="linkExternal; else internalLink">
  <a
    [attr.href]="linkHref"
    [attr.type]="linkType ? linkType : null"
    [ngClass]="{
      'tw-link-base': true,
      'tw-link-default': linkStyle === 'default',
      'tw-link-primary': linkStyle === 'primary',
      'tw-link-danger': linkStyle === 'danger',
      'tw-link-warning': linkStyle === 'warning',
      'tw-link-info': linkStyle === 'info',
    }"
  >
    {{ linkName }}
  </a>
</ng-container>
<ng-template #internalLink>
  <a
    [routerLink]="linkHref"
    [attr.type]="linkType ? linkType : null"
    [ngClass]="{
      'tw-link-base': true,
      'tw-link-default': linkStyle === 'default',
      'tw-link-primary': linkStyle === 'primary',
      'tw-link-danger': linkStyle === 'danger',
      'tw-link-warning': linkStyle === 'warning',
      'tw-link-info': linkStyle === 'info',
    }"
  >
    {{ linkName }}
  </a>
</ng-template>

内部链接用routerLink，外部链接只用原生href，两者互不干扰，属性就能正常渲染。

三、为什么这类场景可能需要Setter？ #

你认为“静态输入无需Setter”，但实际开发中存在这样的场景：当用户以静态属性字符串的方式传入布尔类型Input时（比如写linkExternal="true"而非[linkExternal]="true"），Angular会把字符串"true"传给Input，而非布尔值true。此时如果你的逻辑是严格的=== true判断，就会直接失效；即使是松散判断，也可能因为空字符串、"false"等异常输入导致逻辑出错。

Setter的核心作用是统一处理输入值的类型转换，确保不管用户传入的是布尔值还是字符串，组件内部都能拿到正确的布尔类型：

示例代码（使用Setter）： #

private _linkExternal = false;

@Input() 
set linkExternal(value: boolean | string) {
  // 兼容字符串输入，处理"true"/"false"或空字符串场景
  this._linkExternal = typeof value === 'string' 
    ? value.toLowerCase() === 'true' && value !== ''
    : !!value;
}

get linkExternal(): boolean {
  return this._linkExternal;
}

Angular 14+也可以用Input的transform函数简化实现：

@Input({ 
  transform: (value: boolean | string) => 
    typeof value === 'string' 
      ? value.toLowerCase() === 'true' && value !== ''
      : !!value 
})
public linkExternal: boolean = false;

这样无论用户用绑定语法传入布尔值，还是用静态属性传入字符串，组件都能正确解析输入值，避免类型不匹配导致的逻辑错误。

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