从组件类访问模板参考变量

107

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

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

也就是说，我可以在这里访问它吗，

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

angular typescript angular2-template

— jackOfAll
source

150

这是一个用例@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......
   }
}

这是一个工作示例：

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

— xi
source

但是在调试时我得到this.input本身是未定义的。

— jackOfAll

正如我提到的，事件ngAfterViewInit()被触发后，它才可用。您必须ViewChild从'@ angular / core` ..

— mxii

但是我们如何设置一个值呢？我已经尝试过，this.ipt.nativeElement.setAttribute('value', 'xxx');但是什么也没发生。而且，即使我声明了HTMLInputElement类型的方法，也没有类似value()或的方法setValue()（我将其基于IDE的代码提示/自动完成功能）。就我而言，我不在乎读取值。我只需要设置不同的值。

— MrCroft

目前在假日..您setProperty也尝试过吗？

— mxii

不应该this.input.nativeElement.value = 'test'工作吗？也许表单和它们的绑定有特殊的行为。

— mxii