Angular 自定义输入框指令：添加样式和功能

{"title":"Angular 的 st 组件怎么添加自定义的输入框","description":"在 Angular 中，你可以通过自定义指令来添加自定义的输入框。下面是一个简单的示例：\n\n1. 创建一个新的自定义指令文件（例如，custom-input.directive.ts）：\n\ntypescript\nimport { Directive, ElementRef } from '@angular/core';\n\n@Directive({\n selector: '[appCustomInput]'\n})\nexport class CustomInputDirective {\n\n constructor(private elementRef: ElementRef) {\n this.elementRef.nativeElement.style.border = '1px solid red';\n }\n\n}\n\n\n2. 在你的组件模板中使用自定义指令：\n\nhtml\n<input type="text" appCustomInput>\n\n\n3. 在你的组件模块中导入并声明自定义指令：\n\ntypescript\nimport { NgModule } from '@angular/core';\nimport { CustomInputDirective } from './custom-input.directive';\n\n@NgModule({\n declarations: [\n CustomInputDirective\n ],\n ...\n})\nexport class YourModule { }\n\n\n现在，当你在组件中使用 <input appCustomInput> 标签时，它会应用自定义指令，并且输入框的边框将变为红色。你可以根据需要在自定义指令中添加更多的样式和功能。"}