Angular 2 Animation - Wie man zwei Routenkomponenten gleichzeitig beim Übergang von Route zu Route animiert?

Question

Ich weiß, wir können ein Versprechen an ngOnDestroy Methode zurückgeben, so dass wir genug Zeit haben können, Komponenten wie HTML auszublenden. Es ist jedoch möglich, den HTML-Code der aktuellen Route auszublenden und den HTML-Code für die Route, die gleichzeitig zur nächsten Transit-Route geht, einzublenden.

Innerhalb einer Komponente:

export class BaseResourceComponent extends BaseComponent implements OnDeactivate { 
    ... 
    routerOnDeactivate(next: ComponentInstruction, prev: ComponentInstruction) { 
     return new Promise((res, rej) => setTimeout(() => res(true), 400)); 
    } 
} 

Ich weiß, wie es in Angular 1 zu tun, aber wirklich nicht sicher, Angular 2-Unterstützung oder nicht.

Answer 1

///////////////////////////////////////////////////////////////// 
 
// About Component Start 
 
///////////////////////////////////////////////////////////////// 
 
@Component({ 
 
    selector: 'about-cmp' 
 
}) 
 

 
@View({ 
 
    template: ` 
 
    <h2 class="title">About Page</h2> 
 
    ` 
 
}) 
 

 
class AboutCmp implements OnActivate, onDeactivate { 
 

 
    onActivate(next: ComponentInstruction, prev: ComponentInstruction) { 
 
    console.log("About Page - initialized"); 
 
    } 
 

 
    onDeactivate(next: ComponentInstruction, prev: ComponentInstruction) { 
 
    console.log("About Page - destroyed"); 
 
    } 
 

 
}