Tôi không thể tìm ra cách cung cấp cho thành phần tham chiếu đến chế độ xem của nó, để thực hiện những việc như tập trung vào các yếu tố đầu vào khi biểu mẫu được hiển thị. Tôi không thể xuất hiện để tiêm Element hoặc ng.core.ViewRef hoặc ng.core.View vào hàm tạo. Làm cách nào để tôi có quyền truy cập vào chế độ xem?Góc 2: Tiêm chế độ xem/DOM vào hàm tạo thành phần
Trong Góc 1, tôi sẽ thực hiện việc này bằng liên kết $.
Điều bạn đang tìm kiếm có lẽ là ElementRef và trường nativeElement của nó, nhưng bạn nên tránh truy cập DOM theo cách này. Tôi nghĩ cách tốt hơn là thêm biến mẫu như <input #inp> và truy cập vào biến đó bằng @ViewChild('inp') input. Trong ngAfterViewInitinput tham chiếu phần tử đầu vào.
Xem thêm angular 2/typescript : get hold of an element in the template
Tôi cũng sẽ thận trọng chống truy cập DOM trực tiếp trong góc, nhưng đây là một ví dụ về làm thế nào để làm điều đó:
import {Component, ElementRef, Inject, OnInit} from '@angular/core';
declare var jQuery:any;
@Component({
selector: 'jquery-integration',
templateUrl: './components/jquery-integration/jquery-integration.html'
})
export class JqueryIntegration implements OnInit {
constructor(private elementRef: ElementRef) {
}
ngOnInit() {
jQuery(this.elementRef.nativeElement).find('.moving-box').draggable({containment:'#draggable-parent'});
}
}
Ý tưởng chính là để tiêm elementRef. Sau đó, bạn có thể coi đó là một phần tử DOM thông thường. Trong ví dụ của tôi ở đây tôi đang sử dụng jquery, nhưng bạn cũng có thể sử dụng truy cập DOM chuẩn. Thông tin
thêm: http://www.syntaxsuccess.com/viewarticle/using-jquery-with-angular-2.0
Chỉ cần nói thêm về @ phản ứng Gunter của trên, bạn sẽ sử dụng @ViewChild như thế này:
@ViewChild('myElem') myInput : ElementRef;
inputVal:string;
doSomething(input){
let startCursor = this.myInput.nativeElement.selectionStart;
this.myInput.nativeElement.setSelectionRange(startCursor-1, startCursor-1);
}
html trông như thế này:
<input #myElem type="text" [(ngModel)]="inputVal" maxlength="5" (keyup)="doSomething(myElem)"
Đó là âm thanh về đúng. Tôi đang đấu tranh để tìm một ví dụ về điều đó trong ES5, mặc dù - biết một ví dụ hoặc tài nguyên ra khỏi đó? –
Tôi không biết chi tiết vì tôi chỉ sử dụng Dart, nhưng điều này sẽ hiển thị cách sử dụng DI trong ES5 http://stackoverflow.com/questions/34532138/how-to-inject-custom-service-to-angular- component-in-plain-es5-javascript –
Ồ, xin lỗi, tôi có thể nhận được một ElementRef và cảm ơn con trỏ ở đó! Tôi đã thực sự tìm cách để làm '@ ViewChild' trong ES5 và không thể biến bất cứ điều gì lên. –