각도 2의 애니메이션 상태 변경을 적용하는 방법

Question

내 Angular 2 RC-6 응용 프로그램에서 예쁜 페이지를 애니메이션으로 만들 수 있습니다. 이 기사의 예가 나와 있습니다. https://www.bennadel.com/blog/3139-experimenting-with-conditional-enter-leave-animations-in-angular-2-rc-6.htm 그러나 내부 변환이 변경됩니다. 라우터 구성 요소, 일명 응용 프로그램 페이지를 만들 필요가 있습니다.

내 애니메이션 설정은 다음과 같습니다

host: { 
    '[@routeAnimation]': 'true', 
    '[style.display]': "'block'", 
    '[class]':"'animate-jump-off'" 
    }, 
    animations: [ 
    trigger('routeAnimation', [ 
     state('in', style({transform: 'translateX(0)'})), 
      transition('void => prev', [ 
      style({transform: 'translateX(-100%)'}), 
      animate(300) 
      ]), 
      transition('prev => void', [ 
      animate(1000, style({transform: 'translateX(100%)'})) 
      ]), 
     transition('void => next', [ 
     style({transform: 'translateX(100%)'}), 
     animate(300) 
     ]), 
     transition('next => void', [ 
     animate(1000, style({transform: 'translateX(-100%)'})) 
     ]) 


    ]) 

나는이 전환이 - 다음 다시. 내가 템플릿

<div class="card-container" [@routeAnimation] = "direction" > 

에 변수를 넣어 변화를 정의하고 구성 요소 클래스에 전용 변수를 추가합니다. 난의 setTimeout 사용

emitter = EmitterService.get("direction"); 
    goNext():void { 
    this.emitter.emit({'direction':'next'}); 
    console.log('next'); 
    setTimeout(() => { 

     //this.router.navigate(['/questions/1']); 
    }, 100) 

: 는 I 그 goNext() 함수가 실행되고, i는 다음 페이지로의 링크가 약간의 내부 구성 요소의 새로운 상태를

this.emitter.subscribe(msg => { 
     this.direction = (msg.direction); 
     console.log(msg.direction); 
    }); 

을 방출 EventEmitter를 사용하기로 결정 딜레이가 메시지를 가로 채고 그의 방향 상태를 '다음'으로 전환 할 것을 지연하지만 애니메이션에 적용되지 않는 값입니다. 동일한 인터셉터가 다음 페이지에 있으므로이 페이지 방향 상태도 '다음'으로 전환되어야합니다.

내가 지금 가지고있는 것. 방향 값이 변경되고 있지만 애니메이션이 나타나지 않습니다. (구성 요소 생성자에서 direction = 'none'을 정의합니다.)

내가 현재하고있는 페이지와 다음 페이지 모두에 방향 변경을 적용하는 방법을 잘못 설명합니다. , 또는 각 페이지의 라우팅 변경을 감지하는 다른 방법이 있습니까?

Answer 1

시간 초과 대신 경로 변경이 처리되기 전에 마지막 변경 감지주기를 트리거하는 경로에 할당 된 CanDeactivate Guard를 사용합니다.

https://stackoverflow.com/a/42948545/5155810