角度 4 中的 titlecase 管道答案

【问题标题】：titlecase pipe in angular 4角度 4 中的 titlecase 管道
【发布时间】：2018-01-30 18:24:32
【问题描述】：

Angular 4 引入了一个新的 'titlecase' 管道 '|'并使用将每个单词的首字母变为大写。

例如，

<h2>{{ 'ramesh rajendran` | titlecase }}</h2>
<!-- OUTPUT - It will display 'Ramesh Rajendran' -->

打字稿代码可以吗？怎么做？

【问题讨论】：

标签： angular pipe

【解决方案1】：

是的，在 TypeScript 代码中是可能的。您需要调用 Pipe 的 transform() 方法。

您的模板：

<h2>{{ fullName }}</h2>

在您的 .ts 中：

import { TitleCasePipe } from '@angular/common';

export class App {

    fullName: string = 'ramesh rajendran';

    constructor(private titlecasePipe:TitleCasePipe ) { }

    transformName(){
        this.fullName = this.titlecasePipe.transform(this.fullName);
    }
}

您需要在您的 AppModule 提供程序中添加 TitleCasePipe。您可以在 typescript 代码中的按钮单击或其他一些事件上调用转换。

这是PLUNKER DEMO的链接

【讨论】：

嗨，费萨尔。请注意，> 引用块设备具有特殊的语义含义，即它包含一个“引用”。这意味着从演讲者、书籍、手册或其他人/事物中引用的内容。如果某些东西是用你自己的声音写的，一般来说它不是引用。
您需要将 TitleCasePipe 类添加到模块中的提供者列表中：@NgModule({ declarations: [ AppComponent, ], imports: [ CommonModule, ], providers:[ TitleCasePipe, ] }) 导出类 AppModule { }
您也可以在组件提供者列表中添加 TitleCasePipe：@Component({selector: 'name', templateUrl: 'component.html', providers: [TitleCasePipe]});并从 @angular/common 导入 TitleCasePipe。

【解决方案2】：

是的，你可以这样使用它

<h2>{{ 'ramesh rajendran' | titlecase }}</h2>

但是，不要忘记将CommonModule 导入到您的模块中。

@NgModule({
  imports: [
    CommonModule,
    ...
  ],

【讨论】：