Höhe nicht festgelegt wird, auf element mit Winkel-2 Richtlinie

Ich versuche zu schaffen, eine Flüssigkeit, textarea, aber ich kann nicht erhalten die Höhe gesetzt werden, die auf das element, wenn Sie mit "der Winkel 2 Weg" zu tun, DOM-manipulation.

Komponente:

import {Directive, ElementRef, HostBinding, HostListener} from '@angular/core';

@Directive({
  selector: '[fluidHeight]',
  host: {
    '(input)': 'setHeight()'
  }
})

export class FluidHeightDirective {

  constructor(private _elementRef: ElementRef) {}

  @HostBinding('style.height.px')
  height: number;

  setHeight() {
    this.height = this._elementRef.nativeElement.scrollHeight + 'px';
  }
}

Markup:

<textarea [(ngModel)]="model" fluidHeight></textarea>

Warum ist es, dass ich den richtigen Wert in der setHeight - Funktion, aber die Höhe ist nicht festgelegt auf die textarea?

InformationsquelleAutor Chrillewoodz | 2016-05-24
  1. 4

    Wenn Sie .px im 

    @HostBinding('style.height.px')

    sollten Sie nicht hinzufügen, dass es auch hier

    this.height = this._elementRef.nativeElement.scrollHeight + 'px';

    Entweder

    @HostBinding('style.height')

    oder

        this.height = this._elementRef.nativeElement.scrollHeight;
    • Ok, es funktioniert, keine Ahnung warum die textarea schrumpft auf jeden Tastendruck, bis der text erreicht die Höhe der textarea-und dann beginnt Sie zu wachsen wie es soll?
    • Sinkt durch 2px jedes mal super komisch..
    • Klingt komisch. Können Sie bitte ein plunker, das ermöglicht zu untersuchen?
    • plnkr.co/Bearbeiten/QoZx89rti2xJmD2gS3tU?p=Album Vorhören, erhalte ich den gegenteiligen Effekt hier, aber es wächst auf jeden Tastendruck... Wette, es ist das gleiche Problem obwohl.
    • Scheint, dass Sie sich anpassen müssen, um die scrollHeight. Ich padding zu 0 und die Wirkung ist Weg. Es ist seltsam, dass es anders für Sie vor Ort und in der Plunker. plnkr.co/Bearbeiten/i2rihQFDcyYIsJBDaNOX?p=Album Vorhören. Auch die Einstellung height zu nativeElement.scrollHeight - 4 gearbeitet (Polsterung am oberen und unteren Ende war 2)
    • Scheint nicht zu sein, die Polsterung in meinem lokalen setup, denn es ist größer als 2. Sondern die Grenze... das ist ärgerlich und sehr komisch. Ich werde das weiter untersuchen. Vielen Dank für die Hilfe.

    InformationsquelleAutor Günter Zöchbauer
Schreibe einen Kommentar