템플릿의 장식 자 "@". 어떻게 작동합니까?

Question

누구나이 "@"데코레이터를 각도/이온으로 사용하는 것에 대해 더 많은 정보를 제공 할 수 있습니까?

나는 구성 요소 장식하는 기본적인 사용을 알고 :

@Component ({ 
   Selector: 'page-home', 
   TemplateUrl: 'home.html' 
}) 

내가 웹에 다음이 코드를 가지고,하지만 나는 완전히 코드를 이해 복사 및 붙여 넣기하지 싫어. "템플릿"에서이 용도를보십시오! 예 아니라 구성 요소,하지만 템플릿 :

<Ion-searchbar [@InOut]="varInOutState" (input)="getItems ($event)"> </ ion-searchbar> 

그냥 컨텍스트를 이해하는 나는 @InOut 내 구성 요소의 내부에 완전히 표시하는 조각을 넣어 것입니다.

@Component ({ 
      Selector: 'page-home', 
      TemplateUrl: 'home.html', 
      Animations: [ 
        Trigger ('InOut', [ 
          State ('in', style ({ 
            Transform: 'translate3d (0, 0, 0)' 
          })), 
          State ('out', style ({ 
            Transform: 'translate3d (150%, 0, 0)' 
          })), 
          Transition ('in => out', animate ('200ms ease-in')) 
          Transition ('out => in', animate ('200ms ease-out')) 
        (I.e. 
      ] 
}) 

누군가가 문서를 도와 및 템플릿이 경우 (나는 단지 구성 요소의 사용을 알고 있었다) 요약 수 있을까요?

감사

Answer 1

는 애니메이션 your.component.ts의 장식 요소 선언하고 [@] 구문을 사용하여 계획된 HTML 소자에인가된다.

그래서 케이스에 해당가 컴포넌트 정의 Trigger ('InOut',...

<Ion-searchbar [@InOut]="varInOutState" (input)="getItems ($event)"> </ ion-searchbar> 

첫 번째 부분은 애니메이션 이름과 일치하고 소정의 파라미터 값 ('에서'아웃 '또는)로부터되어 InOut이고 우리 구성 요소.

자세한 내용은 Ng2-Animation