如何在 Angular 2 中绑定 HTML 中组件的静态变量？答案

【问题标题】：How to bind static variable of component in HTML in angular 2?如何在 Angular 2 中绑定 HTML 中组件的静态变量？
【发布时间】：2017-01-04 17:37:32
【问题描述】：

我想在 HTML 页面中使用组件的静态变量。如何将组件的静态变量与 Angular 2 中的 HTML 元素绑定？

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Rx';
@Component({
  moduleId: module.id,
  selector: 'url',
  templateUrl: 'url.component.html',
  styleUrls: ['url.component.css']
})
export class UrlComponent {

  static urlArray;
  constructor() {
  UrlComponent.urlArray=" Inside Contructor"
  }
}

<div>
  url works!
   {{urlArray}}
</div >

【问题讨论】：

标签： angular typescript angular2-services

【解决方案1】：

组件模板中绑定表达式的范围是组件类实例。

您不能直接引用全局变量或静态变量。

作为一种解决方法，您可以在组件类中添加一个 getter

export class UrlComponent {

  static urlArray;
  constructor() {
    UrlComponent.urlArray = "Inside Contructor";
  }

  get staticUrlArray() {
    return UrlComponent.urlArray;
  }

}

并像这样使用它：

<div>
  url works! {{staticUrlArray}}
</div>

【讨论】：

如果 HTML 有 for 循环，那么？我有访问组件静态变量的循环。如果我使用“let person of people()”它不起作用。这里的persons方法返回多个人..得到“TypeError：self.context.persons不是函数”错误
@rajm 请使用允许重现的最少代码创建一个新问题。
刚刚发布..stackoverflow.com/questions/40173118/…
不，您绝对不需要在 getter 上使用 ()，也不应该在其中使用它。 get staticUrlArray() {} 不是public staticUrlArray() {} 一个是像staticUrlArray 这样直接访问，另一个是像staticUrlArray() 这样的方法。
请参阅以下链接以供参考。：github.com/angular/angular/issues/6429

【解决方案2】：

为避免 Angular 在每个循环中调用 get staticUrlArray，您可以在组件的公共范围内保存一个类引用：

export class UrlComponent {

  static urlArray;

  public classReference = UrlComponent;

  constructor() {
    UrlComponent.urlArray = "Inside Contructor";
  }

}

然后就可以直接使用了：

<div>
  url works! {{ classReference.urlArray }}
</div>

【讨论】：

对于我用于复选框状态的简单变量，此方法避免了对 get 函数的数十次调用。如果在循环中使用（例如表格的行），那可能真的是有害的。我会说这是更好的答案，语法更简单。
这是一个非常有趣的解决方案。在类本身中声明对类的引用似乎有点奇怪。但它确实适用于 Angular。

【解决方案3】：

您也可以只声明类类型的字段，如下所示：

export class UrlComponent {
  static urlArray;

  UrlComponent = UrlComponent;
  
  constructor() {
    UrlComponent.urlArray=" Inside Contructor"
  }
}

然后您可以使用此前缀引用静态变量：

<div>
  url works! {{UrlComponent.urlArray}}
</div>

这也有效/对于直接在模板中引用诸如枚举或控制台之类的对象是必要的。

【讨论】：

看起来很像 mithus7 的回答
@BogdanD，确实，我使用“UrlComponent = UrlComponent”的细微差别，因为我发现这比使用不显示我们是哪个类的通用“classReference”更具表现力谈论。另外，我在 3 月份回答，而 mithus7 在 4 月份回答……看了看，我注意到模板中有错字，已修复……

【解决方案4】：

有趣的是，在模板中使用以“readonly”为前缀的类属性确实有效。因此，如果您的静态变量实际上是一个常量，请继续使用

export class UrlComponent {
    readonly urlArray;
}

【讨论】：

【解决方案5】：

这对我有用，但验证器的错误消息停止工作

这是我的代码。

<form [formGroup]="staticformGroup" class="form">
    <div class="box">
        <input type="text" id="uname" class="field" formControlName="name">
         <span class="PlaceHolder" id="namePlaceHolder">Name</span>
         <small *ngIf="name.invalid && name.touched" class="text-danger">Name is Required</small> 
    </div>
    <div class="box">
         <input type="mailOrNum" id="mailOrNum" class="field" formControlName="email">
         <span class="PlaceHolder" id="mailPlaceHolder">Email</span>
         <small *ngIf="email.invalid && email.touched" class="text-danger">invalid value</small>
    </div>
</form>

ts 文件：

static signup = new FormGroup({
    'name': new FormControl("", Validators.required),
    'email': new FormControl("", [Validators.required, Validators.email])
});

get staticformGroup():FormGroup{
    return SignUpFormComponent.signup;
}

【讨论】：

【解决方案6】：

构造函数中不编码的解决方案：

export class UrlComponent {

  static readonly urlArray = 'Inside Class';

  readonly UrlArray = UrlComponent.urlArray;

  constructor() {  }
}

您可以在其他组件或类中使用该静态字段：

import {UrlComponent} from 'some-path';
export class UrlComponent2 {
  readonly UrlArray = UrlComponent.urlArray;
}

在模板中使用（注意UrlArray 中的大写“U”）：

<div>
  url works!
  {{UrlArray}}
</div>

【讨论】：

'static'修饰符必须在'readonly'修饰符之前。ts(1029)
@MikedeKlerk 已修复！