Angular 2: Injektansicht/DOM in Komponentenkonstruktor

Ich kann nicht herausfinden, wie man einer Komponente einen Verweis auf ihre Ansicht geben kann, um z. B. auf Eingabeelemente zu fokussieren, wenn das Formular angezeigt wird. Ich kann nicht scheinen, Element oder ng.core.ViewRef oder ng.core.View in den Konstruktor zu injizieren. Wie kann ich auf die Ansicht zugreifen?Angular 2: Injektansicht/DOM in Komponentenkonstruktor

In Angular 1 würde ich dies mit $ link tun.

Quelle

2016-01-02 Ben Dilts

Was Sie suchen, ist wahrscheinlich ElementRef und seine nativeElement Feld, aber Sie sollten den Zugriff auf das DOM auf diese Weise vermeiden. Ich denke, ein besserer Weg ist, eine Template-Variable wie <input #inp> hinzuzufügen und den Zugriff darauf mit @ViewChild('inp') input. In ngAfterViewInitinput referenziert das Eingabeelement.

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

Quelle

2016-01-02 19:15:08

Das klingt über Recht. Ich bemühe mich jedoch, ein Beispiel dafür in ES5 zu finden - kenne ein Beispiel oder eine Ressource da draußen? –

Ich kenne die Details nicht, weil ich nur Dart verwende, aber dies sollte zeigen, wie man DI in ES5 verwendet http://StackOverflow.com/Questions/34532138/How-to-Inject-Custom-Services-to-angular- component-in-plain-es5-javascript –

Oh, tut mir leid, ich kann ein ElementRef bekommen, und danke für den Zeiger dort! Ich war eigentlich auf der Suche nach "@ ViewChild" in ES5 und konnte nichts ausrichten. –

auch auch gegen direkten Zugang zum DOM in Angular warne ich würde, aber hier ist ein Beispiel dafür, wie es geht:

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

Die Schlüsselidee ist ElementRef zu injizieren. Sie können das dann als normales DOM-Element behandeln. In meinem Beispiel verwende ich jquery, aber Sie können auch den Standard-DOM-Zugriff verwenden.

Weitere Informationen: http://www.syntaxsuccess.com/viewarticle/using-jquery-with-angular-2.0

Quelle

2016-01-02 20:42:01 TGH

einfach auslegen auf @ Gunter Antwort oben, würden Sie @ViewChild wie folgt verwenden:

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

doSomething(input){ 

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

html wie folgt aussieht:

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

Quelle

2016-08-26 21:42:12 Jon

Angular 2: Injektansicht/DOM in Komponentenkonstruktor

Antwort

Verwandte Themen