Angular 8实现长文本省略后，点击打开模态框查看完整内容

针对你的需求，我推荐通过创建一个可复用的Angular组件来实现——毕竟管道的职责应该聚焦纯文本转换，交互逻辑（点击、模态框）放在组件里更符合Angular的设计理念。结合你正在使用的Angular Material和Bootstrap，具体实现步骤如下：

1. 准备工作：导入Angular Material对话框模块 #

首先确保你的模块（比如AppModule）已经导入了MatDialogModule，因为我们要用它来实现模态框功能：

import { MatDialogModule } from '@angular/material/dialog';

@NgModule({
  imports: [
    // 其他已导入模块
    MatDialogModule
  ]
})
export class AppModule { }

2. 创建处理溢出文本的核心组件 #

新建一个名为truncated-text的组件，它会负责三件事：检测文本是否溢出容器、处理数组类型的文本格式化、点击溢出文本时打开模态框展示完整内容。

组件类代码 (truncated-text.component.ts) #

import { Component, Input, ViewChild, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { FullTextDialogComponent } from './full-text-dialog/full-text-dialog.component'; // 后续会创建这个模态框组件

@Component({
  selector: 'app-truncated-text',
  templateUrl: './truncated-text.component.html',
  styleUrls: ['./truncated-text.component.scss']
})
export class TruncatedTextComponent implements OnInit, OnDestroy {
  @Input() text: any;
  @ViewChild('textContainer') textContainer!: ElementRef<HTMLDivElement>;
  isTextTruncated = false;
  formattedText = '';
  private resizeListener!: () => void;

  constructor(private dialog: MatDialog) { }

  ngOnInit(): void {
    // 复用原longText管道的数组处理逻辑
    if (Array.isArray(this.text)) {
      this.formattedText = this.text.join(', ');
    } else {
      this.formattedText = this.text || '';
    }
  }

  ngAfterViewInit(): void {
    // 初始化检测文本是否溢出
    this.checkTextTruncation();
    // 监听窗口 resize，保证窗口变化时溢出状态准确
    this.resizeListener = () => this.checkTextTruncation();
    window.addEventListener('resize', this.resizeListener);
  }

  ngOnDestroy(): void {
    // 销毁时移除监听，避免内存泄漏
    window.removeEventListener('resize', this.resizeListener);
  }

  checkTextTruncation(): void {
    const element = this.textContainer.nativeElement;
    this.isTextTruncated = element.scrollWidth > element.clientWidth;
  }

  openFullTextDialog(): void {
    this.dialog.open(FullTextDialogComponent, {
      width: '600px',
      maxWidth: '90vw',
      data: { fullText: this.formattedText }
    });
  }
}

组件模板代码 (truncated-text.component.html) #

<div 
  #textContainer
  class="p-1 text-truncate"
  (click)="isTextTruncated ? openFullTextDialog() : null"
  [class.cursor-pointer]="isTextTruncated"
>
  {{ formattedText }}
</div>

组件样式（可选，truncated-text.component.scss） #

.cursor-pointer {
  cursor: pointer;
  &:hover {
    text-decoration: underline;
    color: #007bff; // 用Bootstrap的主题色增强交互提示
  }
}

3. 创建模态框组件展示完整文本 #

新建一个full-text-dialog组件，专门用来在模态框里展示完整内容：

模态框组件类 (full-text-dialog.component.ts) #

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-full-text-dialog',
  templateUrl: './full-text-dialog.component.html'
})
export class FullTextDialogComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public data: { fullText: string }) { }
}

模态框模板 (full-text-dialog.component.html) #

<h2 mat-dialog-title>完整内容</h2>
<mat-dialog-content class="p-4">
  <div class="text-break whitespace-pre-line">{{ data.fullText }}</div>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>关闭</button>
</mat-dialog-actions>

4. 替换原有代码使用新组件 #

把你原来的div代码替换成我们的组件即可：

<!-- 原代码 -->
<!-- <div class="p-1 text-break" *ngSwitchDefault [innerHTML]="cell.value | longText"></div> -->

<!-- 新代码 -->
<div *ngSwitchDefault>
  <app-truncated-text [text]="cell.value"></app-truncated-text>
</div>

方案优势 #

• 职责清晰：管道回归纯文本转换的本职，交互逻辑放在组件中，符合Angular最佳实践
• 精准触发：只有真正溢出的文本才会显示点击光标，避免无效交互
• 响应式适配：监听窗口尺寸变化，保证不同屏幕下溢出状态的准确性
• 高复用性：这个组件可以直接在项目其他需要的地方复用，无需重复编写逻辑

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