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

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

从'@angular/core'导入{Component，OnInit}；
从'rxjs/Rx'导入{Observable}；
@组成部分({
moduleId:module.id，
选择器：“url”，
templateUrl:'url.component.html'，
样式url:['url.component.css']
})
导出类URL组件{
静态URL数组；
构造函数（）{
UrlComponent.urlArray=“内部构造函数”
}
}

url工作！
{{urlArray}}

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

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

作为一种解决方法，您可以向components类添加一个getter

export class UrlComponent {

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

  get staticUrlArray() {
    return UrlComponent.urlArray;
  }

}

然后像这样使用它：

url工作！{{staticUrlArray}}

为了避免在每个周期调用get staticUrlArray，您可以在组件的公共作用域中保存一个类引用：

export class UrlComponent {

  static urlArray;

  public classReference = UrlComponent;

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

}

然后您可以直接使用它：

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

url工作！{{classReference.urlArray}}

您也可以只声明类类型的字段，例如：

export class UrlComponent {
  static urlArray;

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

然后，可以使用以下前缀引用静态变量：

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

url工作！{{UrlComponent.urlArray}

---

这对于直接在模板中引用枚举或console等对象也是有效/必要的。

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

export class UrlComponent {
    readonly urlArray;
}

---

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

export class UrlComponent {

  readonly static urlArray = ' Inside Class';

  readonly UrlArray = UrlComponent.urlArray;

  constructor() {  }
}

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

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

在模板中使用（注意

UrlArray

中的大写字母“U”）：

url工作！
{{UrlArray}}

这对我有效，但验证程序的错误消息停止工作

这是我的密码

<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>

---

如果HTML有for循环，那么？我有一个访问组件静态变量的循环。。如果我使用“让一个人中的一个人（）”它就不起作用了。这里persons方法返回多人。。获取“TypeError:self.context.persons不是函数”error@rajm请用最少的代码创建一个新问题，以允许重复。刚刚发布。。不，您肯定不需要在getter上使用

（）

，也不应该在getter上使用它

get staticUrlArray（）{}

不是

public staticUrlArray（）{}

一个是像

staticUrlArray

那样直接访问的，另一个是像

staticUrlArray（）

这样的方法。请参阅下面的链接以获取参考信息：对于复选框状态使用的简单变量，此方法避免了数十次对get函数的调用。如果在循环（例如表的行）中使用，则可能确实有害。我认为这是一个更好的答案，语法更简单。这是一个非常有趣的解决方案。在类本身中声明对类的引用似乎有点奇怪。但它确实在角度上起作用。看起来很像mithus7的answer@BogdanD事实上，我使用“UrlComponent=UrlComponent”的区别很小，因为我发现这比使用没有显示我们所讨论的类的泛型“classReference”更具表现力。另外，我在三月份回答，而mithus7在四月份回答。。。看着它，我注意到我在模板中有一个输入错误，修复了。。。

<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>

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

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