有谁知道如何在 component.ts 文件中使用 titlecase 而不是在 html 文件中？

Question

我尝试了以下代码，但它不起作用。

import { Component } from '@angular/core';
import { TitleCasePipe } from '@angular/common';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  title = 'Working with Pipe';
  testValue = this.titleCasePipe.transform('firstletter should be upper case.');


  constructor(
    public titleCasePipe: TitleCasePipe
  ){}

}

enter image description here

Answer 1

在组件元数据的提供者数组中添加 TitleCasePipe :

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
providers: [TitleCasePipe]
})

Stackblitz example

Answer 2

像这样将代码放入构造函数中，

 testValue: string;


 constructor(
    public titleCasePipe: TitleCasePipe
 ){
    this.testValue = this.titleCasePipe.transform('firstletter should be upper case.');
 }

Answer 3

您可以只创建一个对象，否则，按照@Gérôms 的说法添加提供者

  title = 'Working with Pipe';
  titleCasePipe=new TitleCasePipe()
  testValue = this.titleCasePipe.transform('firstletter should be upper case.');

  constructor(){
  }

Answer 4

没有管道

这是您使用 TitleCase

的简单解决方案

你可以像这样直接使用你不必添加额外的代码angular已经提供了这个功能

HTML

<p>
  {{name | titlecase}} <!-- this is titlecase by default -->
</p>

TS

name = 'Working with Pipe';

带管道

您也可以像这样签入 input 字段

HTML

<input type="text" id="firstName" name="name" 
[ngModel]="name | titleCase" 
(ngModelChange)="name=$event" 
#firstName="ngModel">

TS

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

@Pipe({name: 'titleCase'})
export class TitleCasePipe implements PipeTransform {
    public transform(input:string): string{
        console.log(input);
        if (!input) {
            return '';
        } else {
            return input.replace(/\b\w/g, first => first.toLocaleUpperCase()) 
        }
    } 
}

不要忘记像这样添加 declaration

declarations: [ TitleCasePipe ],

这是我的 stackBlitz you can check here

有谁知道如何在 component.ts 文件中使用 titlecase 而不是在 html 文件中？

Does anyone know how to use titlecase in component.ts file instead in html file?

angular

typescript

title-case

没有管道

带管道