どのように私はテストアプリは、角2で構築していた角度2

Question

に別のルート間で異なるアニメーションを適用するために、私は正常にルート変更の間

state('default', style({ 
    opacity: 1, 
    transform: 'scale(1) translateY(0)' 
})), 
transition('void <=> default', [ 
    style({ opacity: 0, transform: 'scale(.9) translateY(-20px)' }), 
    animate('.2s') 
]) 

を1つのアニメーションを適用している。しかし、私はまた、ときに、リスト異なるアニメーションをしたいです私はアイテムをナビゲーションする前にクリックした後、商品ページへのページの変更、などの英雄 - リスト内のヒーローをクリックして、私はこの

state('childActivate', style({ 
    opacity: 1, 
    transform: 'scale(1) translateY(0)' 
})), 
transition('childActivate => void', [ 
    animate('1.2s', style({ 
     transform: 'scale(0.9) translateY(-120px)', 
     opacity: 0 
    })) 
]) 

をした私は、「childActivated」に状態を設定しようとしました：

onHeroSelected(heroEvent: Hero) { 
    this.animState = "childActivate"; 
    this.router.navigate(['/hero-detail', heroEvent.id]); 
} 

ただし、効果はありません。

ルート間で複数のアニメーションを取得するにはどうすればよいですか？

Answer 1

状態を "childActivate"に設定しても、次の変更検出ステップでコンポーネントが破棄されるため、状態は無効になります。

これは私がこの問題をどのように解決したかです。 私は、経路変更をさらに1回の検出サイクルの変更で遅らせます。私はCanDeactivate Guardを使ってこれを解決し、解決する約束を聞いています。

私plnkrをチェックアウト：私は追加ルート定義の中で https://embed.plnkr.co/cOeDfXCetaYuXFaZ7WeO/

：

canDeactivate: [CanDeactivateAfterChangeDetectionGuard] 

これはCanDeactivateガードです：このインタフェースを実装する任意のコンポーネントと連携し

@Injectable() 
class CanDeactivateAfterChangeDetectionGuard implements CanDeactivate<WaitForChangeDetection> { 
    canDeactivate(component: WaitForChangeDetection): Promise<boolean> { 
    return component.waitForChangeDetection(); 
    } 
} 

：

declare abstract class WaitForChangeDetection { 
    abstract waitForChangeDetection(): Promise<boolean>; 
} 

私はあなたが任意のコンポーネントのためのガードと連携する機能を提供するために、このコンポーネントを拡張することができ、このインタフェース

@Component({}) 
class WaitForChangeDetectionImpl implements AfterViewChecked, WaitForChangeDetection { 
    constructor(private cdRef: ChangeDetectorRef){ 
    this.viewChecked$ = new Subject<void>(); 
    } 

    viewChecked$: Subject<void>; 
    waitForChangeDetection(): Promise<boolean>{ 
    this.cdRef.detectChanges(); 
    return new Promise((resolve) => this.viewChecked$.subscribe(() => resolve(true))); 
    } 

    ngAfterViewChecked(){ 
    this.viewChecked$.next(); 
    } 
} 

のデフォルトの実装で基本コンポーネントを作成しました。

@Component({}) 
class ComponentA extends WaitForChangeDetectionImpl { 
...