我们如何使用 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
}

但是边框只显示在输入元素上，而不是在其中包含输入的输入组件组件上。 如何获得输入：焦点也适用于自定义 angular 组件？

Answer 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();
 }
}

这是一个stackblitz演示。

Answer 2

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

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

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