Ich muss eine readmore-Direktive in Angular2 erstellen. Diese Anweisung bewirkt, dass lange Textblöcke mit Links "Mehr lesen" und "Schließen" ein- und ausgeblendet werden. Nicht aufgrund der Anzahl der Zeichen, sondern aufgrund der angegebenen maximalen Höhe.

<div read-more [maxHeight]="250px" [innerHTML]="item.details">
</div>

Kann jemand eine Anleitung geben, wie die Höhe des Elements für diesen speziellen Fall am zuverlässigsten ermittelt / eingestellt werden kann?

Alle Richtlinien, wie diese spezifische Richtlinie umgesetzt werden könnte, wären ebenfalls sehr willkommen.

Ich muss so etwas bauenhttps: //github.com/jedfoster/Readmore.j

Lösung

Mit der Hilfe von Andzhik kann ich die folgende Komponente erstellen, die meinen Anforderungen entspricht.

import { Component, Input, ElementRef, AfterViewInit } from '@angular/core';

@Component({
    selector: 'read-more',
    template: `
        <div [innerHTML]="text" [class.collapsed]="isCollapsed" [style.height]="isCollapsed ? maxHeight+'px' : 'auto'">
        </div>
            <a *ngIf="isCollapsable" (click)="isCollapsed =! isCollapsed">Read {{isCollapsed? 'more':'less'}}</a>
    `,
    styles: [`
        div.collapsed {
            overflow: hidden;
        }
    `]
})
export class ReadMoreComponent implements AfterViewInit {

    //the text that need to be put in the container
    @Input() text: string;

    //maximum height of the container
    @Input() maxHeight: number = 100;

    //set these to false to get the height of the expended container 
    public isCollapsed: boolean = false;
    public isCollapsable: boolean = false;

    constructor(private elementRef: ElementRef) {
    }

    ngAfterViewInit() {
        let currentHeight = this.elementRef.nativeElement.getElementsByTagName('div')[0].offsetHeight;
       //collapsable only if the contents make container exceed the max height
        if (currentHeight > this.maxHeight) {
            this.isCollapsed = true;
            this.isCollapsable = true;
        }
    }
}

Verwendung

<read-more [text]="details" [maxHeight]="250"></read-more>

Wenn es Verbesserungen geben sollte, können Sie diese gerne vorschlagen.