Programming/Web

[Angular] 템플릿 참조 변수와 세이프 내비게이션 연산자

쌍쌍바나나 2018. 1. 24. 22:47
반응형

템플릿 참조 변수와 세이프 내비게이션 연산자 (Template reference variable & Safe navigation operator)

템플릿 참조 변수 (Template reference variable)

  • DOM요소에 대한 참조를 담고 있는 변수
  • 템플릿 요소 내에서 해시 기호(#)를 변수명 앞에 추가하여 템플릿 참조변수 선언
  • 템플릿 내에서만 유효하며 컴포넌트 클래스에 어떠한 side effect도 주지 않는다.
  • 이벤트 바인딩을 통해 컴포넌트 클래스로 전달할 수는 있다.
  • 사용예로는 이메일 주소 validation check

html <element #myelement> .... </element>

세이프 내비게이션 연산 (Safe navigation operator)

  • 세이프 내비게이션 연산 ?는 컴포넌트 클래스의 프로퍼티의 값이 null 또는 undefined 일때 발생하는 에러를 회피하기 위해 사용
  • 사용예

    • {{ obj }} <-- 결과 없으며 화면에 아무것도 출력하지 않는다.
    • {{ obj.id }} <-- Cannot read property 'id' of undefined
    • {{ obj?id }} <-- 세이프 내비게이션 연산자는 에러를 발생시키지 않는다.
  • [참고]

    • http://poiemaweb.com/angular-component-template-reference-variable
반응형
1 2 3 4 5 6 7 8 ··· 24