Truy cập các biến tham chiếu mẫu từ lớp thành phần

108

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

Có thể truy cập biến truy cập mẫu từ lớp thành phần không?

tức là, tôi có thể truy cập nó ở đây,

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

angular typescript angular2-template

— jackOfAll
nguồn

152

Đó là một trường hợp sử dụng cho @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......
   }
}

Đây là một bản demo hoạt động:

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

— mxii
nguồn

Nhưng khi gỡ lỗi, tôi nhận được this.input chính nó là không xác định.

— jackOfAll

Như tôi đã đề cập, nó chỉ khả dụng SAU KHI sự kiện ngAfterViewInit()được kích hoạt. Bạn phải nhập ViewChildtừ '@ angle / core` ..

— mxii 22/09/2016

Nhưng làm thế nào chúng ta có thể đặt một giá trị? Tôi đã cố gắng this.ipt.nativeElement.setAttribute('value', 'xxx');nhưng không có gì xảy ra. Và không có phương thức nào giống như value()hoặc setValue(), ngay cả khi tôi khai báo nó thuộc loại HTMLInputElement (tôi dựa trên điều này dựa trên gợi ý mã / tự động hoàn thành của IDE). Trong trường hợp của tôi, tôi không quan tâm đến việc đọc giá trị. Tôi chỉ cần đặt các giá trị khác nhau.

— MrCroft

Hiện tại trong Holiday .. bạn setPropertycũng đã thử ?

— mxii

không nên this.input.nativeElement.value = 'test'làm việc ?! có thể có những hành vi đặc biệt với các hình thức và ràng buộc của chúng.

— mxii