blocks|key|4398443|text|components模板中绑定表达式的范围是components类实例。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4398444|您不能直接引用全局变量或静态变量。|4398445|作为一种解决办法，您可以向components类添加getter|4398446|export+class+UrlComponent+{

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

++get+staticUrlArray()+{
++++return+UrlComponent.urlArray;
++}

}|code-block|syntax|javascript|4398447|并像这样使用它：|4398448|<div>
++url+works!+{{staticUrlArray}}
</div>|4398449|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>The scope of binding expressions in a components template is the components class instance. </p>

<p>You can't refer to globals or statics directly.</p>

<p>As a workaround you can add a getter to your components class</p>

<pre><code>export class UrlComponent {

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

  get staticUrlArray() {
    return UrlComponent.urlArray;
  }

}
</code></pre>

<p>and use it like:      </p>

<pre class="lang-html prettyprint-override"><code>&lt;div&gt;
  url works! {{staticUrlArray}}
&lt;/div&gt;
</code></pre>


blocks|key|4398747|text|为了避免在每个周期调用get+staticUrlArray，可以在组件的公共作用域中保存一个类引用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4398748|export+class+UrlComponent+{

++static+urlArray;

++public+classReference+=+UrlComponent;

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

}|code-block|syntax|javascript|4398749|然后你可以直接使用它：|4398750|<div>
++url+works!+{{+classReference.urlArray+}}
</div>|4398751|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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

<pre><code>export class UrlComponent {

  static urlArray;

  public classReference = UrlComponent;

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

}
</code></pre>

<p>And then you can use it directly:</p>

<pre><code>&lt;div&gt;
  url works! {{ classReference.urlArray }}
&lt;/div&gt;
</code></pre>


blocks|key|4398517|text|您也可以只声明一个类类型的字段，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4398518|export+class+UrlComponent+{
++static+urlArray;

++UrlComponent+=+UrlComponent;
++
++constructor()+{
++++UrlComponent.urlArray="+Inside+Contructor"
++}
}|code-block|syntax|javascript|4398519|然后，可以使用以下前缀引用静态变量：|4398520|<div>
++url+works!+{{UrlComponent.urlArray}}
</div>|4398521|在模板中直接引用枚举之类的东西或console之类的对象时，这也是必要的。|4398522|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>You can also just declare a field of the class type, as such:</p>
<pre><code>export class UrlComponent {
  static urlArray;

  UrlComponent = UrlComponent;
  
  constructor() {
    UrlComponent.urlArray=&quot; Inside Contructor&quot;
  }
}
</code></pre>
<p>You can then reference static variables using this prefix:</p>
<pre><code>&lt;div&gt;
  url works! {{UrlComponent.urlArray}}
&lt;/div&gt;
</code></pre>
<p>This also works / is necessary to reference stuff like Enums or objects like console directly in your template.</p>


blocks|key|4398577|text|有趣的是，在模板中使用以"readonly“为前缀的类属性确实有效。因此，如果您的静态变量实际上是一个常量，请继续使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4398578|export+class+UrlComponent+{
++++readonly+urlArray;
}|code-block|syntax|javascript|4398579|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Interestingly, consuming a class-attribute prefixed by &quot;readonly&quot; in the template DOES work. Therefore, if your static variable turns out to actually be a constant, go ahead and use</p>
<pre><code>export class UrlComponent {
    readonly urlArray;
}
</code></pre>


blocks|key|4398877|text|不在构造函数中编码的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4398878|export+class+UrlComponent+{

++readonly+static+urlArray+=+'+Inside+Class';

++readonly+UrlArray+=+UrlComponent.urlArray;

++constructor()+{++}
}|code-block|syntax|javascript|4398879|您可以在其他组件或类中使用该静态字段：|4398880|import+{UrlComponent}+from+'some-path';
export+class+UrlComponent2+{
++readonly+UrlArray+=+UrlComponent.urlArray;
}|4398881|在模板中使用(注意UrlArray中的大写'U‘)：|offset|length|style|CODE|4398882|<div>
++url+works!
++{{UrlArray}}
</div>|4398883|entityMap^0|0|0|0|0|9|8|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@$M|Z|N|10|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>Solution without coding in constructor:</p>
<pre><code>export class UrlComponent {

  readonly static urlArray = ' Inside Class';

  readonly UrlArray = UrlComponent.urlArray;

  constructor() {  }
}
</code></pre>
<p>you can use that static field in other components or classes:</p>
<pre><code>import {UrlComponent} from 'some-path';
export class UrlComponent2 {
  readonly UrlArray = UrlComponent.urlArray;
}
</code></pre>
<p>using in template (note capital 'U' in <code>UrlArray</code>):</p>
<pre><code>&lt;div&gt;
  url works!
  {{UrlArray}}
&lt;/div&gt;
</code></pre>


blocks|key|4398905|text|这对我有效，但是验证器的错误msg停止工作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4398906|这是我的代码。|4398907|<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>|code-block|syntax|javascript|4398908|ts文件：|4398909|static+signup+=+new+FormGroup({
++++'name':+new+FormControl("",+Validators.required),
++++'email':+new+FormControl("",+[Validators.required,+Validators.email])
});

get+staticformGroup():FormGroup{
++++return+SignUpFormComponent.signup;
}|4398910|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>this worked for me but the error msg for validators stopped working</p>
<p>this is my code.</p>
<pre><code>&lt;form [formGroup]=&quot;staticformGroup&quot; class=&quot;form&quot;&gt;
    &lt;div class=&quot;box&quot;&gt;
        &lt;input type=&quot;text&quot; id=&quot;uname&quot; class=&quot;field&quot; formControlName=&quot;name&quot;&gt;
         &lt;span class=&quot;PlaceHolder&quot; id=&quot;namePlaceHolder&quot;&gt;Name&lt;/span&gt;
         &lt;small *ngIf=&quot;name.invalid &amp;&amp; name.touched&quot; class=&quot;text-danger&quot;&gt;Name is Required&lt;/small&gt; 
    &lt;/div&gt;
    &lt;div class=&quot;box&quot;&gt;
         &lt;input type=&quot;mailOrNum&quot; id=&quot;mailOrNum&quot; class=&quot;field&quot; formControlName=&quot;email&quot;&gt;
         &lt;span class=&quot;PlaceHolder&quot; id=&quot;mailPlaceHolder&quot;&gt;Email&lt;/span&gt;
         &lt;small *ngIf=&quot;email.invalid &amp;&amp; email.touched&quot; class=&quot;text-danger&quot;&gt;invalid value&lt;/small&gt;
    &lt;/div&gt;
&lt;/form&gt;
</code></pre>
<p>ts file:</p>
<pre><code>static signup = new FormGroup({
    'name': new FormControl(&quot;&quot;, Validators.required),
    'email': new FormControl(&quot;&quot;, [Validators.required, Validators.email])
});

get staticformGroup():FormGroup{
    return SignUpFormComponent.signup;
}
</code></pre>


<p>I want to use a static variable of a component in HTML page. 
How to bind static variable of component with a HTML element in angular 2?</p>

<pre class="lang-js prettyprint-override"><code>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"
  }
}
</code></pre>

<pre class="lang-html prettyprint-override"><code>&lt;div&gt;
  url works!
   {{urlArray}}
&lt;/div &gt;
</code></pre>


How to bind static variable of component in HTML in angular 2?

我想在HTML页面中使用一个组件的静态变量。如何在angular 2中将组件的静态变量与HTML元素绑定？import { Component, OnInit } from '@angular/core';import { Observable } from 'rxjs/Rx';@Component({  module...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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