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

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

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 >
104169 次浏览
小开
最佳答案

The scope of binding expressions in a components template is the components class instance.

You can't refer to globals or statics directly.

As a workaround you can add a getter to your components class

export class UrlComponent {


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


get staticUrlArray() {
return UrlComponent.urlArray;
}


}

and use it like: 

<div>
url works! \{\{staticUrlArray}}
</div>
小开

To avoid Angular calling get staticUrlArray at each cycle, you can save a class reference in the public scope of the component:

export class UrlComponent {


static urlArray;


public classReference = UrlComponent;


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


}

And then you can use it directly:

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

You can also just declare a field of the class type, as such:

export class UrlComponent {
static urlArray;


UrlComponent = UrlComponent;
  

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

You can then reference static variables using this prefix:

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

This also works / is necessary to reference stuff like Enums or objects like console directly in your template.

小开

Interestingly, consuming a class-attribute prefixed by "readonly" in the template DOES work. Therefore, if your static variable turns out to actually be a constant, go ahead and use

export class UrlComponent {
readonly urlArray;
}
小开

Solution without coding in constructor:

export class UrlComponent {


static readonly urlArray = 'Inside Class';


readonly UrlArray = UrlComponent.urlArray;


constructor() {  }
}

you can use that static field in other components or classes:

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

using in template (note capital 'U' in UrlArray):

<div>
url works!
\{\{UrlArray}}
</div>
小开

this worked for me but the error msg for validators stopped working

this is my code.

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

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


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

提交答案