我们如何在 Angular 2+ 组件中使用 input:focus 选择器？答案

【问题标题】：How do we use the input:focus selector in angular 2+ component?我们如何在 Angular 2+ 组件中使用 input:focus 选择器？
【发布时间】：2020-06-16 13:03:30
【问题描述】：

我有一个包含以下内容的表单：

<div class="form-field">
<input-component [tabIndex]="tabData.tabEnable"></input-component>
</div>
<div class="form-field">
<input [tabIndex]="tabData.tabEnable" matInput cgiPrecision type="number"/>
</div>

在 css 中我有这个：

input:focus {
border: $border-width solid $darkblue
}

但边框只显示在 input 元素上，而不是 input-component 组件上，该组件内部包裹着 input。我怎样才能让 input:focus 也适用于自定义角度组件？

【问题讨论】：

标签： css angular input focus

【解决方案1】：

您的自定义组件应侦听focus 事件，然后聚焦输入。

@Component({
  selector: 'custom-input',
  template: `<input #myInput type="text" [(ngModel)]="innerValue">`,
  styles: [`
    input {border: 5px solid green; } 
    input:focus { border: 5px solid blue; }
  `]
})
export class CustomInputComponent implements ControlValueAccessor  {

  @ViewChild('myInput', {static: false}) inputCtrl;

  //...functions to implement ControlValueAccessor

  @HostListener('focus')
  focusHandler() {
   this.inputCtrl.nativeElement.focus();
 }
}

Here's a stackblitz demonstrating.

【讨论】：

【解决方案2】：

scss 文件仅限于其角度组件。如果要全局使用 css，请使用 style.scss。

另一种选择是，将 scss 与 style-urls 数组集成到您的子组件中：

@Component({
  selector: 'input-component',
  templateUrl: '/input-component.html',
  styleUrls: [
    './input-component.scss',             // own scss file
    './../path-to-other-compontent.scss'  // <--- here
  ]
})
export class InputComponent {
  [...]
}

【讨论】：