将角度为2+的句子的第一个单词(或可选地所有单词)大写

时间:2017-07-19 12:40:56

标签: javascript typescript ecmascript-6 angular2-template angular2-pipe

我正在尝试在角度2模板(也称为视图)中大写字符串的单词但是我在控制台中收到以下错误并且应用程序未加载(显示空白页面):

  

错误:未捕获(在承诺中):错误:模板解析错误:管道   '利用'无法找到

我正在尝试执行以下操作。以下示例使用文字字符串进行说明。实际上,字符串将是角度2分量中的变量。

  1. 如果没有提供参数,则仅将句子的第一个单词大写。
  2.  {{ 'heLlo woRld' | capitalize }} // outputs "HeLlo woRld" - Only "H" is capitalized
    
    1. 通过传递参数' all'来大写字符串的所有单词。
    2.   

      {{' heLlo woRld' |大写:'所有' }} //输出" HeLlo WoRld" -   两者都是" H"和" W"资本化

      1. 要满足的其他一些边缘情况是:
      2.  {{ 'a' | capitalize }}                   // outputs "A"
        
         {{ 'a' | capitalize:'all' }}             // outputs "A"
        
         {{ '' | capitalize }}                    // outputs nothing
        
         {{ '' | capitalize:'all' }}              // outputs nothing
        
         {{ null | capitalize }}                  // outputs nothing
        
         {{ null | capitalize:'all' }}            // outputs nothing
        

        注意:请注意,解决方案应该是纯JS(无csss),并且不必符合unicode标准,但应符合最佳实践,特别是:

        1. 不应使用第三方图书馆(例如jQuery,下划线,lodash)
        2. AND代码应符合Typescript和ES6标准。
        3. 注意:删除了短语" No ES3或ES5 code"因为这句话引起了一些混乱,并且还增加了我得到的错误。

1 个答案:

答案 0 :(得分:-1)

我假设角度2提供了一个开箱即用的“大写”管道(就像它提供了“大写”管道一样)。因此,要解决此问题,请按如下方式创建“大写”管道:

  1. 创建名为 capitalize.pipe.ts
  2. 的文件

    或者,如果您使用的是angular-cli,则可以使用以下命令生成上述文件: ng g pipe capitalize

    注意:您还必须修改modulg文件(例如home.module.ts)以包含新创建/生成的管道。

    1. 修改新创建/生成的文件,如下所示:
    2. import { Pipe, PipeTransform } from '@angular/core';
      
      // To be DRY, define a reusable function that converts a 
      // (word or sentence) to title case
      
      const toTitleCase = (value) => {
        return value.substring(0, 1).toUpperCase() + value.substring(1);
        // alternately, can also use this: 
        // return value.charAt(0).toUpperCase() + value.slice(1);
      };
      
      @Pipe({
        name: 'capitalize'
      })
      export class CapitalizePipe implements PipeTransform {
      
        transform(value: any, args?: any): any {
          if (value) {
            if (args === 'all') {
              return value.split(' ').map(toTitleCase).join(' ');
            } else {
              return toTitleCase(value);
            }
          }
          return value;
        }
      
      }
      
      1. 完成上述操作后,您可以使用模板中的管道(也就是视图),如下所示:
      2.   

        {{'heLlo woRld'|大写}} //输出“HeLlo woRld” -   只有“H”大写

             

        {{'heLlo woRld'|大写:'all'}} //输出“HeLlo WoRld” -   “H”和“W”都是大写的