Angular 4文本截断展开功能实现求助：点击查看更多显示全文

我太懂这种无奈了——想靠现成工具快速实现功能，结果在Angular 4这种稍旧的版本里处处碰壁。其实不用纠结那些第三方库，咱们自己写个轻量的自定义组件就能完美解决，完全适配你的Angular 4环境！

实现思路 #

核心逻辑很简单：判断文本长度，超过指定字数就截断显示，点击“查看更多”切换到完整文本，再点击可以收起。这种自定义实现不依赖任何外部库，稳定性拉满。

完整代码示例 #

1. 创建ReadMoreComponent组件

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

@Component({
  selector: 'app-read-more',
  template: `
    <div class="read-more-container">
      {{ isExpanded ? fullText : truncatedText }}
      <!-- 只有文本长度超过限制时才显示切换按钮 -->
      <span 
        *ngIf="shouldShowToggle" 
        (click)="toggleExpandState()" 
        style="color: #007bff; cursor: pointer; margin-left: 4px;"
      >
        {{ isExpanded ? '收起' : '查看更多' }}
      </span>
    </div>
  `
})
export class ReadMoreComponent implements OnInit {
  // 传入需要处理的完整文本
  @Input() fullText: string = '';
  // 可配置的截断字数，默认40
  @Input() maxTruncateLength: number = 40;

  truncatedText: string = '';
  isExpanded: boolean = false;

  ngOnInit(): void {
    this.processText();
  }

  // 处理文本截断逻辑
  private processText(): void {
    if (!this.fullText) return;
    
    if (this.fullText.length > this.maxTruncateLength) {
      this.truncatedText = `${this.fullText.substring(0, this.maxTruncateLength)}...`;
    } else {
      this.truncatedText = this.fullText;
    }
  }

  // 切换展开/收起状态
  toggleExpandState(): void {
    this.isExpanded = !this.isExpanded;
  }

  // 判断是否需要显示切换按钮
  get shouldShowToggle(): boolean {
    return this.fullText.length > this.maxTruncateLength;
  }
}

2. 在父组件中使用

在需要展示截断文本的地方，直接调用这个组件即可：

<!-- 示例：传入自定义文本和截断字数 -->
<app-read-more 
  [fullText]="yourLongContent" 
  [maxTruncateLength]="40"
></app-read-more>

为什么这个方案适合Angular 4？ #

那些第三方库（比如你提到的ng2-truncate等）大多已经更新到适配Angular 5及以上版本，对Angular 4的兼容性很差。而咱们自己写的组件完全基于Angular 4的核心API，没有任何版本依赖问题，还能根据你的需求灵活调整样式和逻辑。

内容的提问来源于stack exchange，提问作者Roula Halabi