无法将值从组件传递到模板答案

【问题标题】：Unable to pass value from component to template无法将值从组件传递到模板
【发布时间】：2022-01-12 15:46:38
【问题描述】：

我在组件的export class MyComponent 上方定义了一个变量MIN_PW，尽管智能感知在我的formBuilder 中识别了它，但它没有正确显示在 UI 中（UI 显示“密码必须至少包含字符” )。

最初我在export class 中定义了变量，它在工作，但有人建议我用const 设置它并将它移到组件上方。

组件文件：

const MIN_PW = 12;

export class MyComponent implements OnInit {

  myFormGroup = this.formBuilder.group({
      password: new FormControl(null, [Validators.required, Validators.minLength(MIN_PW)]),
      // etc
  )

}

模板文件：

<mat-form-field class="password-field">
<mat-error *ngIf="myFormGroup.controls['password'].invalid">Password must contain at least {{MIN_PW}} characters.</mat-error>
</mat-form-field>

【问题讨论】：

标签： angular typescript variables components

【解决方案1】：

我建议将所有常量声明在一个单独的文件中，您可以将其导入到任何您想要的地方。

对我来说，以下方法似乎更适合您的情况：

在一个或多个 TS 文件中定义和导出常量。
使用 import { MY_CONSTANT } from '../constants/my-constant.ts' 导入常量；无论您在哪里需要它们。
使用它们并获得快乐。

【讨论】：