Angular 创建一个组件以显示输入计数器（角度8）

我必须在不同的组件中多次显示输入字符计数器。所以我认为最好为它创建一个组件

例如：

我试图创建一个模板引用变量并显示其值。然而，计数不是动态的。它保持静止。以下是中的一个实例

代码非常简单：

app.component.html

<input type="text" #input>
<app-caracter-counter [input]="input.value.length"></app-caracter-counter>

这是我找到的最简单的方法，但不起作用

我尝试绑定一个事件emmitter，但这需要在我使用这个

字符计数器的所有组件中使用@Output

有没有办法让这个组件只使用模板标签（在我将使用
字符计数器的组件中）工作
 您应该使用
ngModel
创建从输入字段到AppComponent属性的双向绑定，然后将该属性传递给子组件：


在app.html中

<input type="text" [(ngModel)]="text">

<div *ngIf="text.length !== 0">
    <app-caracter-counter [input]="text.length"></app-caracter-counter>
</div>

将您的代码更改为此

<input type="text" (keyup)="true" (change)="true" #textInput>
<div *ngIf="textInput.value.length !== 0">
 <app-caracter-counter [input]="textInput.value.length"></app-caracter-counter> 
</div>



我添加了
（keyup）=“true”（更改）=“true”
，并将您的条件更改为
textInput.value.length！==0
（而不是
=
）

在表单中使用输入时，您不需要这样做，因为您之前已经发布了
ngModel
或
formControlName
伟大的答案。这里有一点改进，如果您在反应表单场景中的表单组中使用formControlName，则不需要使用templateAccess变量或ngModel。下面是一个示例代码

<form [formGroup]="myFormGroup">
<input type="text" formControlName="txtCtrl1" />
</form>
<app-caracter-counter [input]="myFormGroup.get('txtCtrl1').value.length"></app-caractercounter>



谢谢。
我无法添加ngModel，因为触发了一个错误：“ngModel不能用于向父formGroup指令注册表单控件。请尝试改用formGroup的合作伙伴指令“formControlName”。并且不起作用
[ngModelOptions]=“{standalone:true}”
，请将此添加到您的输入中，你可以在这里阅读更多关于你的代码，谢谢！但我有一个问题。我用的是fromControlName。这会改变什么吗？是的，如果使用formControlName，则不需要添加事件处理程序
<input type="text" (keyup)="true" (change)="true" #textInput>
<div *ngIf="textInput.value.length !== 0">
 <app-caracter-counter [input]="textInput.value.length"></app-caracter-counter> 
</div>

<form [formGroup]="myFormGroup">
<input type="text" formControlName="txtCtrl1" />
</form>
<app-caracter-counter [input]="myFormGroup.get('txtCtrl1').value.length"></app-caractercounter>