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

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
}

但边框仅显示在 input 元素上，而不显示在具有 input 的 input-component 组件上 包裹在里面。如何让 input:focus 也适用于自定义 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();
 }
}

Here's a stackblitz demonstrating.

Answer 2

scss 文件仅限于其 angular 组件。如果要全局使用 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 {
  [...]
}

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

How do we use the input:focus selector in angular 2+ component?

css

focus

input

angular