HTML에서 구성 요소의 정적 변수를 각도 2에서 바인딩하는 방법은 무엇입니까?

HTML에서 구성 요소의 정적 변수를 각도 2에서 바인딩하는 방법은 무엇입니까?

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 >

구성 요소 템플릿의 바인딩 식 범위는 구성 요소 클래스 인스턴스입니다.

글로벌 또는 통계를 직접 참조할 수 없습니다.

해결 방법으로 구성 요소 클래스에 게터를 추가할 수 있습니다.

export class UrlComponent {

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

  get staticUrlArray() {
    return UrlComponent.urlArray;
  }

}

다음과 같이 사용합니다.

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

각 주기에서 GetstaticUrlArray를 호출하지 않으려면 구성 요소의 공용 범위에 클래스 참조를 저장할 수 있습니다.

export class UrlComponent {

  static urlArray;

  public classReference = UrlComponent;

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

}

그런 다음 직접 사용할 수 있습니다.

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

클래스 유형의 필드를 다음과 같이 선언할 수도 있습니다.

export class UrlComponent {
  static urlArray;

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

그런 다음 다음 다음 접두사를 사용하여 정적 변수를 참조할 수 있습니다.

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

또한 템플릿에서 직접 Enums 또는 콘솔과 같은 개체를 참조하는 데 필요합니다.

이것은 나에게 효과가 있었지만 검증자에 대한 오류 메시지가 작동하지 않았습니다.

이건 내 코드야.

<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 파일:

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

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

흥미롭게도 템플릿에서 "읽기 전용"으로 접두사가 붙은 클래스 속성을 사용하면 작동합니다.따라서 정적 변수가 실제로 상수인 경우 다음을 사용합니다.

export class UrlComponent {
    readonly urlArray;
}

생성자에 코딩이 없는 솔루션:

export class UrlComponent {

  static readonly 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>

언급URL : https://stackoverflow.com/questions/39193538/how-to-bind-static-variable-of-component-in-html-in-angular-2