角度4的标题管

Question

Angular 4引入了新的'titlecase'管道'|' 并用于将每个单词的第一个字母更改为大写.

例如,

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

在打字稿代码中有可能吗？如何？

Answer 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);
    }
}

您需要添加TitleCasePipeAppModule提供程序.您可以通过按钮单击或打字稿代码中的其他事件来调用转换.

这是PLUNKER DEMO的链接

Answer 2

是的，你可以这样使用

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

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

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