Fatal编程技术网
  • angular/
  • Angular 角度2阅读更多指令

Angular 角度2阅读更多指令

angular

Angular 角度2阅读更多指令,angular,angular2-template,angular2-directives,Angular,Angular2 Template,Angular2 Directives,我需要在Angular2中构建一个readmore指令。该指令将用于使用“阅读更多”和“关闭”链接折叠和扩展长文本块。不是基于字符数，而是基于指定的最大高度 <div read-more [maxHeight]="250px" [innerHTML]="item.details"> </div> 任何人都可以为这个特殊情况下获取/设置元件高度的最可靠方法提供指导 对于如何实施该具体指令的任何指导方针，我们也将不胜感激 我需要建造这样的东西 解决方案： 在Andzhi

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

<div read-more [maxHeight]="250px" [innerHTML]="item.details">
</div>
任何人都可以为这个特殊情况下获取/设置元件高度的最可靠方法提供指导

对于如何实施该具体指令的任何指导方针，我们也将不胜感激

我需要建造这样的东西

解决方案：

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

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

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

从'@angular/core'导入{Component，Input，ElementRef，AfterViewInit}；
@组成部分({
选择器：“阅读更多”，
模板：`
阅读{{isCollapsed？'more'：'less'}
`,
风格：[`
部门崩溃{
溢出：隐藏；
}
`]
})
导出类ReadMoreComponent在ViewInit之后实现{
//需要放入容器中的文本
@Input（）文本：字符串；
//容器的最大高度
@输入（）最大高度：数字=100；
//将这些值设置为false以获取扩展容器的高度
public iscollected:boolean=false；
public isCollapsable:boolean=false；
构造函数（私有elementRef:elementRef）{
}
ngAfterViewInit（）{
让currentHeight=this.elementRef.nativeElement.getElementsByTagName（'div'）[0].offsetHeight；
//仅当容器中的内容物超过最大高度时才可折叠
如果（currentHeight>this.maxHeight）{
this.isCollapsed=true；
this.isCollapsable=true；
}
}
}
用法：

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

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

<read-more [text]="details" [maxHeight]="250"></read-more>
如果有任何改进，请随时提出。

我想您需要的是
组件
，而不是
指令
<代码>组件更有意义，因为您需要添加阅读更多按钮/链接，即更新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;
}

@组件({
选择器：“阅读更多”，
模板：`
阅读更多
`,
风格：[`
部门崩溃{
高度：250px；
溢出：隐藏；
}
`]
})
导出类ReadMoreComponent{
isCollapsed=true；
}
用法：

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

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

<read-more [text]="details" [maxHeight]="250"></read-more>
在Andzhik的帮助下，我能够构建满足我需求的以下组件

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

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

从'@angular/core'导入{Component，Input，ElementRef，AfterViewInit}；
@组成部分({
选择器：“阅读更多”，
模板：`
阅读{{isCollapsed？'more'：'less'}
`,
风格：[`
部门崩溃{
溢出：隐藏；
}
`]
})
导出类ReadMoreComponent在ViewInit之后实现{
//需要放入容器中的文本
@Input（）文本：字符串；
//容器的最大高度
@输入（）最大高度：数字=100；
//将这些值设置为false以获取扩展容器的高度
public iscollected:boolean=false；
public isCollapsable:boolean=false；
构造函数（私有elementRef:elementRef）{
}
ngAfterViewInit（）{
让currentHeight=this.elementRef.nativeElement.getElementsByTagName（'div'）[0].offsetHeight；
//仅当容器中的内容物超过最大高度时才可折叠
如果（currentHeight>this.maxHeight）{
this.isCollapsed=true；
this.isCollapsable=true；
}
}
}
用法：

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

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

<read-more [text]="details" [maxHeight]="250"></read-more>
我制作了一个使用字符长度而不是div大小的版本

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

@Component({    
    selector: 'read-more',
    template: `
        <div [innerHTML]="currentText">
        </div>
            <a [class.hidden]="hideToggle" (click)="toggleView()">Read {{isCollapsed? 'more':'less'}}</a>
    `
})

export class ReadMoreComponent implements OnChanges {
    @Input() text: string;
    @Input() maxLength: number = 100;
    currentText: string;
    hideToggle: boolean = true;

    public isCollapsed: boolean = true;

    constructor(private elementRef: ElementRef) {

    }
    toggleView() {
        this.isCollapsed = !this.isCollapsed;
        this.determineView();
    }
    determineView() {
        if (!this.text || this.text.length <= this.maxLength) {
            this.currentText = this.text;
            this.isCollapsed = false;
            this.hideToggle = true;
            return;
        }
        this.hideToggle = false;
        if (this.isCollapsed == true) {
            this.currentText = this.text.substring(0, this.maxLength) + "...";
        } else if(this.isCollapsed == false)  {
            this.currentText = this.text;
        }

    }
    ngOnChanges() {
        this.determineView();       
    }
}

从'@angular/core'导入{Component，Input，ElementRef，OnChanges}；
@组件（{
选择器：“阅读更多”，
模板：`
阅读{{isCollapsed？'more'：'less'}
`
})
导出类ReadMoreComponent实现OnChanges{
@Input（）文本：字符串；
@Input（）maxLength:number=100；
当前文本：字符串；
隐藏切换：布尔值=真；
public iscollected:boolean=true；
构造函数（私有elementRef:elementRef）{
}
切换视图（）{
this.isCollapsed=！this.isCollapsed；
这是determineView（）；
}
determineView（）{
如果（！this.text | | this.text.length
import{Component，Input，OnChanges}来自“@angular/core”；
@组件（{
选择器：“阅读更多”，
模板：`
阅读{{isCollapsed？'more'：'less'}
`
})
导出类readmore指令实现OnChanges{
@输入（'text'）文本：字符串；
@输入（'maxLength'）maxLength:number=100；
@输入（'showToggleButton'）showToggleButton:布尔值；
当前文本：字符串；
public iscollected:boolean=true；
建造师(
//私有elementRef:elementRef
) {
}
切换视图（）{
this.isCollapsed=！this.isCollapsed；
这是determineView（）；
}
determineView（）{

如果（this.text.length如果要在不剪切任何单词的情况下将文本显示到最大字符数，请更改这行代码：


this.currentText = this.text.substring(0, this.maxLength) + "...";


致：


只是@Andrei Zhytkevich代码的一点改进
（对降价有用）


导入{
组成部分，
AfterViewInit，
ViewChild，
ElementRef，
属性
ChangeDetectionStrategy}来自“@angular/core”；
@组成部分({
changeDetection:ChangeDetectionStrategy.OnPush，
选择器：“ui读取更多信息”，
模板：`
{{isCollapsed？'More'：'Less'}
`,
风格：[`
：主持人{
显示：块；
}
.崩溃{
溢出：隐藏；
垫底：1毫米；
}
.阅读更多{
显示器：flex；
证明内容：柔性端；
}
`]
})
导出类UiReadMoreComponent在ViewInit之后实现{
@ViewChild（“包装器”）包装器：ElementRef；
isCollapsed:boolean=true；
私有内容高度：字符串；
私有高度：字符串；

 showMore(data:boolean){
    if(data){
      $("#dots").css('display', 'none');
      $("#more").css('display', 'inline');
      this.showLess_More = "SEE LESS ...";
      this.paasValueOn_SeeMoreBtn = false;
    }else{
      $("#dots").css('display', 'inline');
      $("#more").css('display', 'none');
      this.showLess_More = "SEE MORE...";
      this.paasValueOn_SeeMoreBtn = true;

    }

  }



.descLess {
  margin-bottom: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  word-wrap: break-word;
  display: -webkit-box;
  line-height: 1.8;      <==== adjust line-height...a/q to your need
  letter-spacing: normal;
  white-space: normal;
  max-height: 52px;  <==== 250px etc:-
  width: 100%;
  /* autoprefixer: ignore next */
  -webkit-line-clamp: 2; <==== clamp line 2...or 3 or 4 or 5...
  -webkit-box-orient: vertical;
}



    <div class="col-12 rmpm">
          <div id="descLess" *ngIf="seeMoreDesc === 'false'" class="descLess col-12 rmpm">
                {{inputData?.desc}}
           </div>
        <div *ngIf="seeMoreDesc === 'true'" class="col-12 rmpm" style="margin-bottom: 10px;line-height: 1.8;"> 
   <!--Use Line height here-->
                {{inputData?.desc}}
               </div>
        <span class="seeMore" *ngIf="seeMoreDesc === 'false' && lineHeightDesc > 21"
             (click)="updateSeeMore('seeMoreDesc', 'true')">
                 See More
        </span>
        <span class="seeMore" *ngIf="seeMoreDesc === 'true'"
               (click)="updateSeeMore('seeMoreDesc', 'false')">
                   See Less
        </span>
         </div>



declare const $:any;
seeMoreDesc = 'false';
seeMore = '';
inputData = {
   'desc':'Lorem Ipusme dummy text..................'
 }
 constructor(
        private eRef: ElementRef,
        private cdRef : ChangeDetectorRef
    ) {}
    ngAfterViewChecked() {
       // pass line height here
        this.lineHeightDesc = (Number($('#descLess').height()) / 1.8);
        this.cdRef.detectChanges();
    }


     public updateSeeMore(type, action) {
         if (type === 'seeMoreDesc') {
               this.seeMoreDesc = action;
                this.cdRef.detectChanges();
            } else if (type === 'seeMore') {
                this.seeMore = action;
                this.cdRef.detectChanges();
            }

        }