web-dev-qa-db-ja.com

Angular 2 Read More Directive

Angular2でreadmoreディレクティブを作成する必要があります。このディレクティブが行うことは、「続きを読む」リンクと「閉じる」リンクを使用して、長いテキストブロックを折りたたみ、展開することです。文字数ではなく、指定された最大の高さに基づいています。

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

誰でもこの特定のケースの要素の高さを取得/設定する最も信頼できる方法を教えてください。

この特定のディレクティブを実装する方法に関するガイドラインも高く評価されます。

このようなものを構築する必要があります https://github.com/jedfoster/Readmore.js

解決策：

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

使用法：

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

改善点がある場合は、お気軽にご提案ください。

angularangular2-templateangular2-directives
13
Naveed Ahmed

ComponentではなくDirectiveが必要になると思います。 Componentsは、追加する必要があるため、より意味があります続きを読むボタン/リンク、つまりDOMを更新します。

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

export class ReadMoreComponent {
    isCollapsed = true;
}

使用法：

<read-more>
   <!-- you HTML goes here -->
</read-more>
18
Andrei Zhytkevich

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

使用法：

<read-more [text]="text" [maxLength]="100"></read-more>
26
jugg1es

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

使用法：

<read-more [text]="details" [maxHeight]="250"></read-more>
15
Naveed Ahmed
import { Component, Input,OnChanges} from '@angular/core';
@Component({    
    selector: 'read-more',
    template: `
        <div [innerHTML]="currentText"></div>
        <span *ngIf="showToggleButton">
            <a (click)="toggleView()">Read {{isCollapsed? 'more':'less'}}</a>
        </span>`
})

export class ReadMoreDirective implements OnChanges {

    @Input('text') text: string;
    @Input('maxLength') maxLength: number = 100;
    @Input('showToggleButton')showToggleButton:boolean;

    currentText: string;

    public isCollapsed: boolean = true;

    constructor(
        //private elementRef: ElementRef
    ) {

    }
    toggleView() {
        this.isCollapsed = !this.isCollapsed;
        this.determineView();
    }

    determineView() {

        if (this.text.length <= this.maxLength) {
            this.currentText = this.text;
            this.isCollapsed = false;
            return;
        }

        if (this.isCollapsed == true) {
            this.currentText = this.text.substring(0, this.maxLength) + "...";
        } else if(this.isCollapsed == false)  {
            this.currentText = this.text;
        }

    }

    ngOnChanges() {
        if(!this.validateSource(this.text)) {
            //throw 'Source must be a string.';
            console.error('Source must be a string.');
        }
        else{
            this.determineView();
        }
    }

    validateSource(s) {
        if(typeof s !== 'string') {
            return false;
        } else {
            return true;
        }
    }
}

および使用法

<read-more [text]="this is test text" [maxLength]="10" [showToggleButton]="true"></read-more>

1
Ipe Himanshu

このプラグインを使用できます。

デフォルトで表示する[text]および[textLength]を渡す場合にのみ使用するのは非常に簡単です https://www.npmjs.com/package/nga-read-more =

0
DirtyMind

Wordをカットせずに最大文字数までテキストを表示する場合は、次のコード行を変更します。

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

に：

this.currentText = this.text.substring(0, this.maxLength);
this.currentText = this.currentText.substr(0, Math.min(this.currentText.length, this.currentText.lastIndexOf(" ")))
this.currentText = this.currentText + "..."
0
D.B

繰り返しますが、動的データと完全な制御により、これらのタイプの問題を解決しました。

 <div class="Basic-Info-para">
   <p>
     <span *ngIf="personalBasicModel.professionalSummary.length>200" id="dots"> 
         {{personalBasicModel.professionalSummary | slice:0:200}} ...
    </span>
     <span id="more">{{personalBasicModel.professionalSummary }}
</span>
 </p>
</div>

ここでは、personalBasicModel.professionalSummaryにはstringが含まれます。任意のテキストのように。
slice：0：20​​ =長さ200文字のスプライス文字列にスライスパイプを使用します。要件に応じて長さを変更できます。 id = "dots"＆id = "more" 2つの重要なこと。

<div class="Basic-Info-SeeMore">
            <button class="SeeMore"(click)="showMore(paasValueOn_SeeMoreBtn)">
                {{showLess_More}}
            </button>
        </div>

ここでは、ダイナミックテキスト（詳細を参照してください）クリックイベントでボタンを定義します。

// ---------------------------------- tsファイル------------ ----------------------- //

変数を定義する

showLess_More：string = "SEE MORE ...";
paasValueOn_SeeMoreBtn：boolean = true;

ユーザーが[詳細を表示]ボタンをクリックすると、Event（Method）が起動します

 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;

    }

  }
0
nagender pratap chauhan

ありがとう、コンソールエラーのためにNgOnInitでそれを少し変更しました。それにわずかな変更があり、Angular 6。

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

    a {
      color: #007bff !important;
      cursor: pointer;
    }
`]
})
export class ReadMoreComponent implements OnInit {

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

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

// set these to false to get the height of the expended container 
public isCollapsed = false;
public isCollapsible = false;

constructor(private elementRef: ElementRef) {
}

ngOnInit() {
  const currentHeight = document.getElementById('textCollapse').offsetHeight;
  if (currentHeight > this.maxHeight) {
    this.isCollapsed = true;
    this.isCollapsible = true;
  }
 }
}
_

ご覧のとおり、私は
const current Height = document.getElementById('textCollapse').offsetHeight;

0
tommyshere

@Andrei Zhytkevichコードのわずかな改善（マークダウンに有用）

import {
  Component,
  AfterViewInit,
  ViewChild,
  ElementRef,
  Attribute,
  ChangeDetectionStrategy } from '@angular/core';

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'ui-read-more',
  template: `
    <div [class.collapsed]="isCollapsed" [style.height]="_height">
      <div #wrapper>
        <ng-content></ng-content>
      </div>
    </div>
    <div class="read-more">
      <button
      type="button"
      class="btn btn-light" (click)="onIsCollapsed()">{{isCollapsed ? 'More' : 'Less'}}</button>
    </div>
  `,
  styles: [`
    :Host{
      display: block;
    }
    .collapsed {
      overflow: hidden;
      padding-bottom: 1rem;
    }
    .read-more{
      display: flex;
      justify-content: flex-end;
    }
  `]
})
export class UiReadMoreComponent implements AfterViewInit{
  @ViewChild('wrapper') wrapper: ElementRef;
  isCollapsed: boolean = true;
  private contentHeight: string;
  private _height: string;
  constructor(@Attribute('height') public height: string = '') {
    this._height = height;
  }
  ngAfterViewInit() {
    this.contentHeight = this.wrapper.nativeElement.clientHeight + 'px';
  }
  onIsCollapsed(){
    this.isCollapsed = !this.isCollapsed;
    this._height = this.isCollapsed ? this.height : this.contentHeight;
  }
}

使用法

<ui-read-more height="250px">
 <ngx-md>
    {{post.content}}
 </ngx-md>
</ui-read-more>
0
Whisher

ラインハイトアプローチ：-

lineheightおよび少しの計算といくつかのcss text-overflow: Ellipsis;はこの仕事をします。

.css

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

.html

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

.ts

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

        }
0
Mahi