각도 2 템플릿 방법 대 게터

각도 2 템플릿 방법 대 게터

이렇게 하는 데 어떤 이점이 있는지 궁금하다.

  <div>{{getSomething()}}</div>

  export class MyComp {
    getSomething() { return ...}
  }

이에 대한 자세한 내용은 다음을 참조하십시오.

 <div>{{getSomething}}</div>

 export class MyComp {
   get getSomething() { return ...}
 }

메소드 대 게이터를 사용하여 계산된 데이터를 표시하십시오.

나는 이것을 더 깊이 들여다보고 활자판 플레이그라운드를 가지고 놀았다.나는 너의 질문에 설명된 대로 두 개의 수업을 게터, 두 번째 수업을 게터, 그리고 get 메서드로 선언했다.

어떻게 생겼는지 보자:

첫 번째 예에서는 다음과 같은 방법으로 재산가치를 얻기 위한 방법을 선언하였다.

class Greeter {
  greeting: string;
  constructor(message: string) {
      this.greeting = message;
  }
   getGreeting() {
      return this.greeting;
  }
}

Javascript로 번역한 후 다음과 같이 보인다.

var Greeter = (function () {
   function Greeter(message) {
       this.greeting = message;
   }
   Greeter.prototype.getGreeting = function () {
       return this.greeting;
   };
   return Greeter;
}());

그리고 우리가 다음과 같은 방법으로 게터를 선언한 두 번째 예에 관해서도 말이다.

class GetterGreeter {
   _greeting: string;
   constructor(message: string) {
       this._greeting = message;
   }
    get greeting() {
       return this._greeting;
   }
}

번역 후 다음과 같이 보인다.

var GetterGreeter = (function () {
   function GetterGreeter(message) {
       this._greeting = message;
   }
   Object.defineProperty(GetterGreeter.prototype, "greeting", {
       get: function () {
           return this._greeting;
       },
       enumerable: true,
       configurable: true
   });
   return GetterGreeter;
}());

(여기서 선언서와 자바스크립트 번역으로 연주할 수 있다)

get method로 (첫 번째 예에서와 같이) 방법을 프로토타입에 선언하고, getter pattern typecript를 사용하는 두 번째 예에서는 defineProperty api를 사용한다.

두 경우 모두 우리가 방법을 호출하고 있으며 각도는 변경 감지 중에 변경사항을 식별하고 다시 렌더링하는 방법을 호출할 것이다.

내가 본 바로는 이것은 동일한 접근법에 대한 구문론적 설탕일 뿐이며 나는 그 방법 중 하나에 대해 어떤 성능상의 이점도 볼 수 없다.

당신이 게이터이거나 방법이라면 기술적인 관점에서 문제가 되지 않는다.

어떤 사람들은 게이터는 필드와 비슷하게 행동해야 하고, 값비싼 계산을 해서는 안 된다는 관례를 사용하는 반면, 계산이 예를 들어 중간과 성에서 전체 이름을 짓는 것과 같은 아주 기본적인 것 이상이면 방법을 사용해야 한다.

나는 이것이 앵글의 구별을 따르는 것이 좋다고 생각한다. 왜냐하면 시각적 결합을 위해 값비싼 계산은 피해야 하기 때문이다. 왜냐하면 방법이나 게이터는 매우 자주 호출될 수 있기 때문이다.이런 경우에는 결과를 필드에 저장하고 대신 필드에 바인딩하는 것이 좋다.

바인딩에서 매우 중요한 것은 종속성이 수정되지 않았을 때 메서드나 게터가 후속 호출에서 다른 값을 반환하지 않는다는 것이다(예:return {};, 새로운 개체 인스턴스로 처리되어 다음과 같은 오류를 발생시킬 수 있음ExpressionChangedAfterItHasBeenCheckedError).

차이점은 첫 번째 경우에는 표현에서 함수를 사용하지만 두 번째 경우에는 함수가 아니다.그래서 사용할 수 없다.

<div>{{getSomething()}}</div>

export class MyComp {
  get getSomething() { return ...}
}

---

두 번째 방법을 사용할 경우의 이점은 클래스 내의 속성 캡슐화를 사용하는 것이며 클래스 밖에서 액세스해야 한다.

게이터와 세터는 ES5 스펙의 일부다.당신은 게터와 세터에 대해 읽을 수 있다.

에 의해get/set구문 분석 메서드가 필드처럼 동작하는 경우 아래 예제를 참조하십시오.

일반 게터 방식으로 사용

usingGetterMethod()
{
  let id = this.getId();
}

getId()
{
  return this.reactiveForm.get('id');
}

get method별 사용

usingGetMethod()
{
  let id = this.id;
}

get id()
{
  return this.reactiveForm.get('id');
}

참조URL: https://stackoverflow.com/questions/43166792/angular-2-templates-methods-vs-getters