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

78

我想在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

— Santosh Hegde
source

115

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

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

作为解决方法，您可以向组件类添加吸气剂

export class UrlComponent {

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

  get staticUrlArray() {
    return UrlComponent.urlArray;
  }

}

并像这样使用它：

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

— 贡特·佐赫鲍尔（GünterZöchbauer）
source

如果HTML具有for循环，那么？我有访问组件静态变量的循环。这里的人员方法返回多个人员..收到“ TypeError：self.context.persons不是函数”错误

— raj m

@rajm请使用允许重现的最少代码创建一个新问题。

— 君特Zöchbauer

刚刚发布..stackoverflow.com

— questions/40173118/

4

不，您绝对不需要()吸气剂，也不应该在那里使用它。get staticUrlArray() {}不是public staticUrlArray() {}一个像一样直接访问staticUrlArray，另一个像一个方法一样staticUrlArray()。

— Timothy Zorn，

1

另请参见以下链接以供参考：github.com/angular/angular/issues/6429

— Sudhakar，

36

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

export class UrlComponent {

  static urlArray;

  public classReference = UrlComponent;

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

}

然后您可以直接使用它：

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

— mithus7
source

2

对于我用于复选框状态的简单变量，此方法避免了对get函数的数十次调用。如果在循环中使用（例如，表的行），则可能确实有害。我会说这是更好的答案，语法也更简单。

— 院长

这是一个非常有趣的解决方案。在类本身中声明对一个类的引用似乎有些奇怪。但是它确实可以在Angular中工作。

— Papilonius爵士

1

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

export class UrlComponent {
  static urlArray;

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

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

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

直接在模板中引用枚举之类的东西或诸如console之类的对象也是必需的。

— ey
source

似乎非常像mithus7的答案

— Bogdan D

实际上，@ BogdanD与我使用“ UrlComponent = UrlComponent”的微小区别在于，我发现它比使用不显示我们在谈论哪个类的通用“ classReference”更具表达力。另外，我在三月回答，而mithus7在四月回答...看着它，我注意到模板中有错字，修正了这个问题……

— mmey

0

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

export class UrlComponent {
    readonly urlArray;
}

— 菲利克斯·A
source

0

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

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

在范本中使用（请注意在中使用大写字母“ U” UrlArray）：

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

— 米哈尔
source