从组件类访问模板引用变量 | 从组件类访问模板引用变量

本文介绍了从组件类访问模板引用变量的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述


<input #ipt type="text"/>

是否可以从组件类访问模板访问变量?

即，我可以在这里访问它吗，

class XComponent{一些功能(){//我可以在这里访问#ipt吗?}}

解决方案

这是 @ViewChild 的一个用例:

https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html

class XComponent {@ViewChild('ipt', { static: true }) 输入:ElementRef;ngAfterViewInit() {//this.input 现在有效！！}一些功能(){this.input.nativeElement......}}

这是一个工作演示:

https://stackblitz.com/edit/angular-viewchilddemo?file=src%2Fapp%2Fapp.component.ts

<div>
   <input #ipt type="text"/>
</div>

Is it possible to access the template access variable from the component class?

i.e., can I access it here,

class XComponent{
   somefunction(){
       //Can I access #ipt here?
   }
}

解决方案

That is a use-case for @ViewChild:

https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html

class XComponent {
   @ViewChild('ipt', { static: true }) input: ElementRef;

   ngAfterViewInit() {
      // this.input is NOW valid !!
   }

   somefunction() {
       this.input.nativeElement......
   }
}

Here's a working demo:

https://stackblitz.com/edit/angular-viewchilddemo?file=src%2Fapp%2Fapp.component.ts

这篇关于从组件类访问模板引用变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！