如何移除Angular的app-input组件选择器，仅保留原生input标签？

要解决这个问题，核心是把app-input组件的标签选择器换成属性选择器或类选择器，这样Angular就不会在DOM里生成自定义的<app-input>标签，而是直接把组件逻辑附着在原生<input>元素上。

步骤1：修改app-input组件的选择器 #

打开app-input组件的TypeScript文件，修改@Component装饰器里的selector字段：

方案一：使用属性选择器（推荐）

@Component({
  selector: '[app-input]', // 把标签选择器改成属性选择器
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.css']
})
export class InputComponent {
  // 组件原有逻辑不变
}

方案二：使用类选择器

@Component({
  selector: '.app-input', // 改成类选择器
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.css']
})
export class InputComponent {
  // 组件原有逻辑不变
}

步骤2：更新模板中的组件调用方式 #

根据你选择的选择器类型，调整父组件模板里的代码：

对应属性选择器的写法

<form [formGroup]="form" novalidate autocomplete="off" (ngSubmit)="onSubmit()">
  <app-form-field label="Input" [required]="true" [control]="form.controls['input']">
    <input app-input formControlName="input"> <!-- 直接在原生input上添加app-input属性 -->
  </app-form-field>
</form>

对应类选择器的写法

<form [formGroup]="form" novalidate autocomplete="off" (ngSubmit)="onSubmit()">
  <app-form-field label="Input" [required]="true" [control]="form.controls['input']">
    <input class="app-input" formControlName="input"> <!-- 给原生input添加app-input类 -->
  </app-form-field>
</form>

注意事项 #

• 检查app-input组件的模板：如果原来的模板里已经是直接渲染原生<input>，那改完选择器就能用；如果有额外的包裹容器（比如<div>），需要调整模板结构，确保最终只输出原生<input>。
• 表单控件的绑定（比如formControlName）不受影响，依然能正常关联到表单组。
• 修改完成后，DOM里只会出现原生<input>标签，你可以正常使用~或>这类CSS组合器来定位样式。

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