[英]How to bind static variable of component in HTML in angular 2?
I want to use a static variable of a component in HTML page.我想在 HTML 页面中使用组件的静态变量。 How to bind static variable of component with a HTML element in angular 2?如何将组件的静态变量与 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 >
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作为一种解决方法,您可以在组件类中添加一个 getter
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:为了避免 Angular 在每个周期调用 get staticUrlArray,您可以在组件的公共范围内保存一个类引用:
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.有趣的是,在模板中使用以“readonly”为前缀的类属性确实有效。 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 {
readonly static 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
):在模板中使用(注意UrlArray
大写“U”):
<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: .ts 文件:
static signup = new FormGroup({
'name': new FormControl("", Validators.required),
'email': new FormControl("", [Validators.required, Validators.email])
});
get staticformGroup():FormGroup{
return SignUpFormComponent.signup;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.