如何基于使用Angular 8的输入使输入显示为句子大小写？

在Angular 8中，我们可以使用@Input装饰器来获取从父组件传递的输入值。在本文中，我们将介绍如何通过输入（Input）来将文本显示为句子大小写。

步骤

1. 创建一个组件

首先，我们需要在Angular 8中创建一个组件。运行以下命令：

ng generate component capitalize-text

这将创建一个名为“capitalize-text”的Angular组件。

2. 添加输入装饰器

在capitalize-text.component.ts文件中，我们需要使用@Input装饰器来声明输入属性。代码如下：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-capitalize-text',
  templateUrl: './capitalize-text.component.html',
  styleUrls: ['./capitalize-text.component.css']
})
export class CapitalizeTextComponent {
  @Input() text: string;
}

3. 编写HTML模板

在capitalize-text.component.html文件中，我们将显示通过输入属性传递的文本。

<div>
  {{ text | titlecase }}
</div>

这里我们使用了Angular的内置管道titlecase来将文本转换为句子大小写。

4. 使用组件

现在我们可以在另一个组件中使用capitalize-text组件并传递文本。例如，在app.component.html文件中，将文本传递给capitalize-text组件。

<app-capitalize-text [text]="'hello world'"></app-capitalize-text>

输出将是：

Hello World

结论

现在我们已经知道如何基于使用Angular 8的输入使输入显示为句子大小写。通过使用@Input装饰器和内置管道titlecase，我们可以轻松地将文本转换为句子大小写。