typescript - 如何在 Angular 中截斷文字？

我想顯示較小的文字。我看到有些選項像是製作自訂管道來截斷字串，但我的情況如下所示有所不同。

<p [innerHTML]="aboutUs"></p>

在這個情況下，我不能使用自訂管道。我這麼做是因為我顯示的是後端傳來的文字，而且它帶有標籤，所以使用了 [innerHtml]。請幫忙。

答案＃1

你可以使用 TypeScript 搭配自訂函數，如下所示，

truncateChar(text: string): string {
    let charlimit = 100;
    if(!text || text.length <= charlimit )
    {
        return text;
    }

  let without_html = text.replace(/<(?:.|\n)*?>/gm, '');
  let shortened = without_html.substring(0, charlimit) + "...";
  return shortened;
}

並在 HTML 中引用它為，

<div [innerHTML]="truncateChar(aboutUs)"></div>

答案＃2

避免在 HTML 模板中使用方法呼叫，因為它會被呼叫很多次，如果所需的結果是靜態的或不經常修改，這將會造成不必要的處理。

從 ngOnInit、ngOnChange 或任何你正在更新 aboutUs 變數的地方調用方法 truncateChar(in @Sajeetharan answer)，並將結果保存到該組件中的某個變數中。

在模板中使用此變數，而不是直接調用該方法。