查看更多使用 Angular 4 的长文本答案

【问题标题】：See more for long text using Angular 4查看更多使用 Angular 4 的长文本
【发布时间】：2018-06-11 22:00:19
【问题描述】：

有什么方法可以分割文本并将其限制为例如 40 个单词，然后在“查看更多”链接之后显示整个文本。

我试过 ng2-truncate 和 read-more-directive 和 ng-text-truncate-2 但它不适用于 Angular 4。

【问题讨论】：

请查看stackoverflow.com/questions/44669340/…。当用户点击多于向用户显示全文时，您可以使用管道显示截断的文本。
我之前检查过，但是这种方式没有“更多”选项
你必须自己创建它。

标签： angular

【解决方案1】：

我会用更简单的方式：

read.more.component.html：

<p class="see-more">
    {{ seeMore ? text : text.substr(0, max) }}
    <ng-container *ngIf="text.length > max">...
        <a class="text-primary" (click)="seeMore = !seeMore;">See {{ seeMore ? 'less' : 'more'}}</a>
    </ng-container>
</p>

read.more.component.ts：

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

@Component({
  selector: 'app-read-more',
  templateUrl: './read-more.component.html',
  styleUrls: ['./read-more.component.scss']
})
export class ReadMoreComponent {

  @Input() text: string;
  @Input() max: number = 150;

  seeMore: boolean = false;

  constructor() { }
}

【讨论】：

当我在表中的一行上使用此方法时，带有描述的整个表都会触发查看更多。如何发送索引以使其仅在一行上触发。

【解决方案2】：

您可以使用组件。例如：<app-read-more [text]="yourText"></app-read-more>

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

    @Component({
        selector: 'app-read-more',
        template: `<p class='break-wrap mb0' style='white-space: pre-wrap;' [hidden]='fullText' [innerHTML]='rmTextShort'></p><p class='break-wrap mb5' style='white-space: pre-wrap' [hidden]='!fullText' [innerHTML]='rmTextFull'></p><p class='mb0'><small><a href='javascript:;' class='text-primary' (click)='readMore(true)' [hidden]='!showMore'>{{'more' | translate}}</a><a href='javascript:;' (click)='readMore(false)' class='text-primary' [hidden]='!showLess'>{{'less' | translate}}</a></small></p>`,
    })
    export class ReadMoreComponent implements OnChanges {
        @Input() text: string;
        fullText = true;
        showMore = false;
        showLess = false;
        rmTextShort = ''; 
        rmTextFull = ''; 
        inputWords = [];
        constructor() {
        }

        readMore(flag) {
            if (flag) {
                this.showMore = false;
                this.fullText = true;
                this.rmTextFull = this.text;
                this.showLess = true;
            } else {
                this.showLess = false;
                this.showMore = true;
                this.fullText = false;
            }
        }

        ngOnChanges () {
            this.rmTextShort = this.text;
            this.rmTextFull = this.text;
            this.inputWords = this.text.split(' ');
            if (this.inputWords.length > 30) {
                this.fullText = false;
                this.showMore = true;
                this.rmTextShort = this.inputWords.slice(0, 30).join(' ') + '...';
            } else {
                if (this.rmTextShort.length > 300) {
                    this.fullText = false;
                    this.showMore = true;
                    this.rmTextShort = this.rmTextShort.substr(0, 300) + '...'
                } else {
                    const lineBreaks = this.rmTextShort.split(/\n/g)
                    if (lineBreaks.length > 4) {
                        this.fullText = false
                        this.showMore = true
                        this.rmTextShort = lineBreaks.slice(0, 4).join('\n') + '...'
                    }
                }
            }
        }
    }

【讨论】：