Angular 组件内部的模板引用变量_Angular

Angular 组件内部的模板引用变量

angular

Angular 组件内部的模板引用变量,angular,Angular,我有一个组件，它的模板中声明了一些模板引用变量： <div> <input #inp type="text"> ...more stuff... </div> …更多的东西。。。如何从主组件（如表单）访问此“#inp”模板变量在我的例子中，我需要在打开表单时将焦点设置为该输入更新我在表单“app myform”中使用“app mycomponent”，如下所示： <form> <app-mycomponent&g

我有一个组件，它的模板中声明了一些模板引用变量：

<div>
  <input #inp type="text">
  ...more stuff... 
</div>


…更多的东西。。。

如何从主组件（如表单）访问此“#inp”模板变量

在我的例子中，我需要在打开表单时将焦点设置为该输入

更新我在表单“app myform”中使用“app mycomponent”，如下所示：

<form>
   <app-mycomponent></app-mycomponent>
   ...other components in this form
</form>


…此表单中的其他组件

在myform.component.ts中，我想聚焦“app mycomponent”中的“#inp”。

您需要定义

ViewChild

。像这样：

@ViewChild('inp')
input: ElementRef<HTMLInputElement>;

@ViewChild（'inp'）
输入：ElementRef；

阅读更多：

您需要定义

ViewChild

。像这样：

@ViewChild('inp')
input: ElementRef<HTMLInputElement>;

@ViewChild（'inp'）
输入：ElementRef；

阅读更多：

您只需通过

ViewChild

访问模板变量即可

在您的组件中：

@ViewChild('inp') // use the name of your template variable
input: ElementRef;

现在您可以访问输入，但它在

ngAfterView

生命周期挂钩和更高版本中可用（请参阅）

更新：要设置此元素的焦点，可以执行以下操作：

this.input.nativeElement.focus()

更新2：有多种方法可以做到这一点。一种方法是通过

EventEmitter

或

Subject

通知子组件，将焦点设置到输入字段。另一种方法是通过

ViewChild

访问子组件并执行一个函数，该函数将焦点设置为输入字段

1。选项：

myform.component.ts

focus$: Subject<void> = new Subject();

...

buttonClickFunction() {
    this.focus$.next();
}

@ViewChild('inp') // use the name of your template variable
input: ElementRef;

@Input()
focus$: Subject<void>;

ngAfterViewInit() {
    this.focus$.subscribe(() => {
        this.setFocusToInput();
    });
}

setFocusToInput() {
    this.input.nativeElement.focus()
}

@ViewChild(AppMyComponent) // your component class name
appMyComponent: AppMyComponent

...

// In a function or somewhere else you can call the function to set the focus
buttonClickFunction() {
    this.appMyComponent.setFocusToInput();
}

@ViewChild('inp') // use the name of your template variable
input: ElementRef;

...

setFocusToInput() {
    this.input.nativeElement.focus()
}

app-mycomponent.component.ts

focus$: Subject<void> = new Subject();

...

buttonClickFunction() {
    this.focus$.next();
}

@ViewChild('inp') // use the name of your template variable
input: ElementRef;

@Input()
focus$: Subject<void>;

ngAfterViewInit() {
    this.focus$.subscribe(() => {
        this.setFocusToInput();
    });
}

setFocusToInput() {
    this.input.nativeElement.focus()
}

@ViewChild(AppMyComponent) // your component class name
appMyComponent: AppMyComponent

...

// In a function or somewhere else you can call the function to set the focus
buttonClickFunction() {
    this.appMyComponent.setFocusToInput();
}

@ViewChild('inp') // use the name of your template variable
input: ElementRef;

...

setFocusToInput() {
    this.input.nativeElement.focus()
}

当前和您当前的情况下，我建议您选择第二个选项。