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

问题描述

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

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

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

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

我需要构建这样的东西 https://github.com/jedfoster/Readmore.js

解决方案:

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

import { Component, Input, ElementRef, AfterViewInit } from '@angular/core';@成分({选择器:'阅读更多'，模板:`<div [innerHTML]="text" [class.collapsed]="isCollapsed" [style.height]="isCollapsed ? maxHeight+'px' : 'auto'">

<a *ngIf="isCollapsable" (click)="isCollapsed =!isCollapsed">阅读{{isCollapsed?'更多':'更少'}}</a>`，样式:[`div.collapsed {溢出:隐藏；}`]})导出类 ReadMoreComponent 实现 AfterViewInit {//需要放入容器的文本@Input() 文本:字符串；//容器最大高度@Input() maxHeight: number = 100;//将这些设置为false以获取消耗的容器的高度公共 isCollapsed: boolean = false;公共 isCollapsable: boolean = false;构造函数(私有元素引用:元素引用){}ngAfterViewInit() {let currentHeight = this.elementRef.nativeElement.getElementsByTagName('div')[0].offsetHeight;//仅当内容使容器超过最大高度时才可折叠如果(当前高度> this.maxHeight){this.isCollapsed = true;this.isCollapsable = true;}}}

用法:

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

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

解决方案

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

@Component({选择器:'阅读更多'，模板:`<div [class.collapsed]="isCollapsed"><ng-content></ng-content>

<div (click)="isCollapsed = !isCollapsed">阅读更多</div>`，样式:[`div.collapsed {高度:250px；溢出:隐藏；}`]})导出类 ReadMoreComponent {isCollapsed = true;}

用法:

<阅读更多><!-- 你的 HTML 在这里--></阅读更多>

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.

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

Solution:

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

Usage:

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

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

解决方案

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

Usage:

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

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