Question

有没有办法切片文本并用40个单词限制它，例如＆＃34;更多＆＃34;链接将显示整个文本。

我尝试了ng2-truncate和read-more-directive以及ng-text-truncate-2，但它不适用于Angular 4。

Answer 1

您可以使用Component。例如：<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') + '...'
                    }
                }
            }
        }
    }

Answer 2

我将以一种更简单的方式进行操作：

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

使用Angular 4查看更多长文本

2 个答案: