将焦点设置在"角度"中"父组件"的"子组件"文本框上

Question

我正试图将焦点放在Angular中Parent组件的子组件文本框上。

父组件HTML：

<button (click)="setFocusOnChildComponentTextBox()">Button</button>
<child-component></child-component>

子组件HTML：

<input type="text" id="txt" name="txt"></input>

父组件TS：

setFocusOnChildComponentTextBox() {
// write code to set focus on child-component "txt" textbox
}

以上只是我试图实现的一个示例代码。

通常在Angular中，我们可以将输入属性传递给子组件并具有输出方法。在这种情况下，我需要从父组件调用子组件的方法。

Answer 1

在子组件中，让我们假设您有输入

<input type="text" #myInput></input>

在子组件中，打字脚本具有

@ViewChild('myInput', {read:ElementRef}) myInput: ElementRef<HTMLInputElement>;

在父组件中，类型脚本具有

@ViewChild(ChildComponent) comp: ChildComponent;

使用聚焦

this.comp.myInput.nativeElement.focus();