Renderer ist veraltet als eine Gunst für renderer2, alternative für `invokeElementMethod`?

Für ein side-Projekt von mir, ich will zu implementieren eine chat-stream, wo die neue Nachricht Hinzugefügt, um den Boden und die Fenster sollten ganz nach unten scrollen, um die Anzeige der neuesten Nachricht.

Damit zu tun, dass ich entschieden haben, zu verwenden ViewChildren auf die Komponente zu finden, die Letzte Nachricht(neueste) und verwenden scrollIntoView auf die nativeElement.

Um nicht zu rufen Sie die Methode mit dem Zugriff auf die DOM-API direkt nativeElement.scrollIntoView(). Ich glaube, ich werde verwenden müssen renderer.invokeElementMethod(nativeElement, 'scrollIntoView').

Problem ist renderer ist veraltet, zu Gunsten der renderer2 und ich kann nicht scheinen zu finden, alternativen für die Methode invokeElementMethod im renderer2.

Frage ist, gibt es eine Methode, dass ich verpasst in renderer2, die genau das tun? oder haben wir eine neue Weise tun-element-Methode aufrufen jetzt?

InformationsquelleAutor endyjasmi | 2017-04-13
  1. 14

    Können Sie selectRootElement Methode der Renderer2.

    Beispiel: 

    constructor(private renderer: Renderer2) {}

this.renderer.selectRootElement('#domElementId').scrollIntoView()

    wo domElementId ist id='domElementId' in Ihre html -

    UPDATE

    Liefern Zweite Argument für selectRootElement als pro Winkel-Offizielle Dokumentation, wie es ist verwendet, um bewahren Sie Ihre Inhalte

    selectRootElement(selectorOrNode: any, preserveContent?: boolean): any

    this.renderer
  .selectRootElement'#domElementId', true)  //Supply true for the 2nd arg to make sure your content is preserved.
  .scrollIntoView()                      //Or ({ behavior: 'smooth' }) for smooth scrolling
    • Ich würde vermeiden, mit Renderer2 wie es ist schlecht dokumentiert, für unit-testing,...für die Prüfung, die Sie" am Ende schreiben Sie Ihre eigenen renderer
    • Das hat nicht funktioniert für mich mit Renderer2. Das element ausgewählt wurde, aber das aufrufen scrollIntoView nur entfernt diesen Teil vom dom!! Ich musste wieder auf die ViewChild Methode der Aufruf direkt
    • Ich weiß nicht, wie diese 10 upvotes. selectRootElement löscht alle untergeordneten Knoten des ausgewählten Elements. Es ist nur für die Auswahl der root-Winkel-element, und nicht für die Auswahl bestimmter Elemente Siehe github.com/angular/angular/issues/19554#issuecomment-341848166
    • diese Funktion Prototyp parameter, um die Inhalte beizubehalten selectRootElement(selectorOrNode: jeder, preserveContent?: boolean): keine
    • Es ist Zweck ist, wählen Sie das root - element, nicht auf ein spezifisches element. Missbrauch auf eigene Gefahr:-) API-Dokumentation ..prepare an element to be bootstrapped as a root element, and return the element instance. Winkel.io/api/core/Renderer2#selectrootelement
    InformationsquelleAutor seytzhan
  2. -1

    Wir beantworten Sie dies durch ein Beispiel:

    In Fall haben wir eine Ansicht wie diese:

    <input #inp1 type="text" placeholder="focus on me" />

    Innen ngAfterViewInit() es muss konzentriert wie dieser:

    this.renderer.selectRootElement("inp1").scrollIntoView();
    • Ihre Beiträge sind willkommen! Können Sie nach dem code, die für Sie gearbeitet wie eine Antwort, so dass andere davon profitieren können?
    InformationsquelleAutor xameeramir
Schreibe einen Kommentar