Question

现场的长字符串达到一定数量后必须带有省略号。我创建了以下角管

export class FormatString implements PipeTransform {

 transform(widgetString1: string): string {
     const maxWords = 20;
     const ellipsis = '...';
     if (widgetString1.length > 10) {
         return widgetString1.substring(0, maxWords) + ellipsis;
     } else {
         return widgetString1;
     }
    }

这样的管道在HTML中使用

<div class="text-nowrap ellipsis" *ngIf="max[i]=== 65">
{{item.message | formatString}}

它工作正常，我想向管道添加更多功能。用户单击文本后，省略号应消失，并应显示全文。我应该如何修改管道？

使用管道的BTW是理想的，因此我可以在应用程序中的任何地方使用它

Answer 1

一种实现方法是，将Pipe配置为接受字符长度作为输入，如果要保留全文，则可以在模板中决定是将文本修剪为较短的长度还是通过'name'的大小

fn main() {
    let tst = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
    let mut windows = tst.windows(3);

    // prints ['a', 'b', 'c']
    println!("{:?}", windows.next().unwrap());
    // prints ['b', 'c', 'd']
    println!("{:?}", windows.next().unwrap());
    // etc...
}

在模板中，您可以决定要传递的修剪尺寸参数值。在下面的示例中，单击div将显示“名称”的完整值，然后再次单击将显示修剪的文本。

fn main() {
    let tst = String::from("abcdefg");
    let inter = ? //somehow create slice of character from tst
    let mut windows = inter.windows(3);

    // prints ['a', 'b', 'c']
    println!("{:?}", windows.next().unwrap());
    // prints ['b', 'c', 'd']
    println!("{:?}", windows.next().unwrap());
    // etc...
}

现在，您的模板中有多个类似“ name”的变量-您可以在组件中为每个变量添加一个属性，以跟踪是要显示完整文本还是修剪文本。但这可能变得难以处理。

我在上面所做的是使用模板引用变量@Pipe({name: 'formatString'}) export class FormatString implements PipeTransform { transform(text: string, trimTo: number): string { const ellipsis = '...'; if (trimTo && text.length > trimTo) { return text.substring(0, trimTo) + ellipsis; } else { return text; } } }并将标志存储在div元素中。根据您的看法，这也可能变得难以管理。

我认为您最好为用例定义一个指令。

我们可以定义一个属性指令，将其称为<div class="text-nowrap ellipsis" (click)="nameDiv.displayFullText = !nameDiv.displayFullText" #nameDiv> {{name | formatString:(nameDiv.displayFullText ? name.length : 5) }} </div>，并为其提供两个输入：#nameDiv用于显示，trim用于显示不带省略号的最大字符数。 / p>

例如，您的模板将如下所示：

displayText

这是指令的实现：

maxCharsToDisplay

需要在角管上输入

1 个答案: