Как мы используем селектор input: focus в компоненте angular 2+?

Question

У меня есть форма, которая содержит что-то вроде следующего:

<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
}

, но граница отображается только на * 1007 Элемент * input , а не компонент input-component , внутри которого находится input . Как я могу получить input: focus для работы и с настраиваемым компонентом angular?

Answer 1

Файлы

s css ограничены их компонентом angular. Если вы хотите использовать css глобально, используйте style.scss.

Другой вариант - интегрировать s css в свой дочерний компонент с массивом 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 {
  [...]
}

Answer 2

Пользовательский компонент должен прослушивать событие 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();
 }
}

Вот демонстрация stackblitz.