将输入集中在自定义Angular MatFormFieldControl中

Question

如何使父组件在页面加载时关注自定义MatFormFieldControl中的asset1输入字段*？

父组件HTML:

<mat-form-field class="symbol">
<symbol-input
name="symbol"
placeholder="Symbol"
ngModel
#symbolInput="ngModel"
[(ngModel)]="symbol"></symbol-input>
</mat-form-field>

自定义MatFormFieldControlHTML:

<div [formGroup]="parts">
<input class="asset1" formControlName="asset1" size="12">
<span class="input-spacer">&frasl;</span>
<input class="asset2" formControlName="asset2" size="12">
</div>

*我假设我将在父组件中实现AfterViewInit，并希望触发一个focus事件？

Answer 1

@IvanS95为我指明了正确的方向。

为我的父组件添加了一个ViewChild：

@ViewChild(SymbolInputComponent) set focus(sic: SymbolInputComponent) {
sic.autofocus = true;
};

然后，我在自定义MatFormFieldControl中添加了一个设置为false的公共变量autofocus。以防我需要在给定的页面上多次使用此字段。

然后我将autofocus添加到我的MatFormFieldControl模板中：

<div [formGroup]="parts">
<input class="asset1" formControlName="asset1" size="12" [autofocus]="autofocus">
<span class="input-spacer">&frasl;</span>
<input class="asset2" formControlName="asset2" size="12">
</div>