我有一个表单，它包含如下内容:
<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
}
但是边框只显示在输入元素上，而不显示在内部包装有输入的输入组件上。 我怎样才能得到输入:焦点来为自定义角度组件工作呢？
您的自定义组件应该侦听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在演示。
scss文件仅限于其角度组件。 如果要全局使用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 {
[...]
}
