Angular 2阅读更多指令 [英] Angular 2 Read More Directive

问题描述

我需要在Angular2中建立一个readmore指令.该指令将执行的操作是使用阅读更多"和关闭"链接折叠和扩展较长的文本块.不是基于字符数，而是基于指定的最大高度.

I need to build a readmore directive in Angular2. What this directive will do is for collapse and expand long blocks of text with "Read more" and "Close" links. Not on the basis of the character count but on the basis of the specified max height.

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

在这种情况下，任何人都可以指导最可靠的方法来获取/设置元素的高度.

Can anyone please guide what would be the most reliable way to get/set the height of the element for this specific case.

任何有关如何实施此特定指令的准则也将受到高度赞赏.

Any guidelines on how this specific directive could be implemented would also be highly appreciated.

我需要构建类似这样的内容 https://github.com/jedfoster/Readmore.js

I need to build something like this https://github.com/jedfoster/Readmore.js

解决方案:

在Andzhik的帮助下，我可以构建满足我要求的以下组件.

With the help from Andzhik I am able to build the below component that meets my requirements.

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

用法:

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

如果有任何改进，请随时提出建议.

If there could be any improvements, please feel free to suggest.

推荐答案

我认为您需要一个Component而不是Directive. Components更有意义，因为您需要添加阅读更多按钮/链接，即更新DOM.

I think you'll need a Component rather then Directive. Components makes more sense since you need to add Read more button/link, i.e. update DOM.

@Component({
    selector: 'read-more',
    template: `
        <div [class.collapsed]="isCollapsed">
            <ng-content></ng-content>
        </div>
        <div (click)="isCollapsed = !isCollapsed">Read more</div>
    `,
    styles: [`
        div.collapsed {
            height: 250px;
            overflow: hidden;
        }
    `]
})

export class ReadMoreComponent {
    isCollapsed = true;
}

用法:

<read-more>
   <!-- you HTML goes here -->
</read-more>

这篇关于Angular 2阅读更多指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！