角度句子案例管道也扰乱了现有的骆驼案例？

Question

我有以下文字： “请完成你的任务” “请考虑一下菲利普的想法”

我将它们发送到同一个组件，然后显示为句子大小写：

 {{ textToDisplay | translate | sentenceCase }}

问题： 第一句话的工作方式除外：

“请完成你的任务”

第二句话不能正常工作 - 它也将退出驼峰式大小写更改为较低。

“请考虑一下菲利普的想法”

是否有任何参数可以发送到管道或其他现有管道来解决此问题？

Answer 1

创建自定义管道。内置的 Angular 管道没有参数来保留驼峰式单词的大小写。

这样的东西应该有帮助：

export class CustomSentenceCasePipe implements PipeTransform {
  transform(value: string): string {
    if (!value) return value;
    return value.replace(/\w\S*/g, function(txt) {
      return txt.charAt(0).toUpperCase() + txt.substr(1);
    });
  }

在这种情况下，我们使用正则表达式来匹配字符串中的每个单词，然后将每个单词的第一个字符转换为大写，同时保留单词的其余部分不变。

在 HTML 中像这样使用它：

{{ textToDisplay | translate | customSentenceCase }}

Answer 2

似乎您正在使用来自 @nglrx/pipes

 库的 

sentencePipe。

其行为会将第一个字母转换为大写，其余字母转换为小写。

相反，您应该实现一个自定义管道将第一个字母仅转换为大写并保留其余字母：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'capitalize',
  standalone: true,
})
export class CapitalizePipe implements PipeTransform {
  transform(value: string | null): string {
    return (value && value.charAt(0).toUpperCase() + value.slice(1)) ?? '';
  }
}

然后，导入

CapitalizePipe

并使用如下：

{{ textToDisplay | translate | capitalize }}

演示@StackBlitz