Angular 角度：使用省略号截断长文本，并在单击时显示更多内容

我正在使用Angular 8、Angular材质和引导实用程序。我有以下代码：

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

所以基本上，我有一个两列的布局，当文本溢出列的宽度时，我希望它显示省略号

它起作用了。但是，现在我希望能够单击带有省略号的div并打开一个显示整个文本的模式

---

做这件事的好方法是什么？

我建议在这个用例中使用组件而不是管道，如下所示：

@Component({
    selector: 'truncate-text',
    template: '<div (click)="openModal()" class="text-break" [innerHTML]="text"></div>',
})
export class TruncateTextComponent {
    @Input() text: string|string[];

    openModal() {
        // Use your preferred way of opening a modal and pass this.text as data
    }
}

@组件({
选择器：“截断文本”，
模板：“”，
})
导出类TruncateTextComponent{
@Input（）文本：字符串|字符串[]；
openModal（）{
//使用您喜欢的方式打开一个模式，并将此.text作为数据传递
}
}

以及使用该组件：

<div class="p-1 text-break" *ngSwitchDefault>
    <truncate-text [text]="cell.value"></truncate-text>
</div>

---

您需要扩展示例以支持数组作为输入。

是的，好主意。。。而不是在管道里摸索。这就是我最后要做的。谢谢

<div class="p-1 text-break" *ngSwitchDefault>
    <truncate-text [text]="cell.value"></truncate-text>
</div>