Angolare 2: Inject view/DOM nella funzione di costruzione del componente

Non riesco a capire come assegnare a un componente un riferimento alla sua vista, per eseguire operazioni come la messa a fuoco sugli elementi di input quando viene visualizzato il modulo. Non riesco a iniettare Element o ng.core.ViewRef o ng.core.View nel costruttore. Come posso accedere alla vista?Angolare 2: Inject view/DOM nella funzione di costruzione del componente

In Angular 1, lo farei con $ link.

fonte

2016-01-02 Ben Dilts

Quello che stai cercando è probabilmente ElementRef e il suo campo nativeElement, ma dovresti evitare di accedere al DOM in questo modo. Penso che un modo migliore sia aggiungere una variabile modello come <input #inp> e accedervi con @ViewChild('inp') input. In ngAfterViewInitinput fa riferimento all'elemento di input.

Vedi anche angular 2/typescript : get hold of an element in the template

fonte

2016-01-02 19:15:08

Che suona su destra. Sto faticando a trovarne un esempio in ES5, però - conosci un esempio o una risorsa là fuori? –

Non conosco i dettagli perché uso solo Dart, ma questo dovrebbe mostrare come usare DI in ES5 http://stackoverflow.com/questions/34532138/how-to-inject-custom-service-to-angular- component-in-plain-es5-javascript –

Oh, mi dispiace, posso ottenere un ElementRef, e grazie per il puntatore lì! In realtà stavo cercando come '@ ViewChild' in ES5 e non potevo girare nulla. –

Vorrei inoltre in guardia contro l'accesso DOM diretto angolare, ma qui è un esempio di come farlo:

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'}); 
    } 
}

L'idea chiave è di iniettare elementRef. Puoi quindi trattarlo come un normale elemento DOM. Nel mio esempio qui sto usando jquery, ma puoi anche usare l'accesso DOM standard.

Maggiori informazioni: http://www.syntaxsuccess.com/viewarticle/using-jquery-with-angular-2.0

fonte

2016-01-02 20:42:01 TGH

Giusto per esporre su @ risposta di Gunter sopra, si può usare @ViewChild come questo:

@ViewChild('myElem') myInput : ElementRef; 
inputVal:string; 

doSomething(input){ 

    let startCursor = this.myInput.nativeElement.selectionStart; 
    this.myInput.nativeElement.setSelectionRange(startCursor-1, startCursor-1); 
}

html assomiglia a questo:

<input #myElem type="text" [(ngModel)]="inputVal" maxlength="5" (keyup)="doSomething(myElem)"

fonte

2016-08-26 21:42:12 Jon

Angolare 2: Inject view/DOM nella funzione di costruzione del componente

risposta

Problemi correlati