首页 文章

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

提问于
浏览
35

我想在HTML页面中使用组件的静态变量 . 如何将组件的静态变量与角度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 >

2 回答

  • 67

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

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

    作为解决方法,您可以向组件类添加getter

    export class UrlComponent {
    
      static urlArray;
      constructor() {
        UrlComponent.urlArray = "Inside Contructor";
      }
    
      get staticUrlArray() {
        return UrlComponent.urlArray;
      }
    
    }
    

    并使用它像:

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

    要避免Angular调用在每个循环中获取staticUrlArray,可以在组件的公共范围中保存类引用:

    export class UrlComponent {
    
      static urlArray;
    
      public classReference = UrlComponent;
    
      constructor() {
        UrlComponent.urlArray = "Inside Contructor";
      }
    
    }
    

    然后你可以直接使用它:

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

相关问题