在Angular 2中，我试图通过Router onActivate方法在新组件中设置动画。
我已经设置了一个Plunk，并在此处演示了该问题： http://plnkr.co/FikHIEPONMYhr6COD9Ou
其中一个页面组件中的onActivate方法示例：
routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) {
document.getElementsByTagName("page3")[0].className='animateinfromright';
}
我遇到的问题是我希望新组件在现有组件的顶部上进行动画处理，但在新组件出现之前，旧组件将从DOM中删除加入。
是否有办法延迟删除上一页，而新的页面会动画？
我发现了类似的问题：Page transition animations with Angular 2.0 router and component interface promises 但该技术只是在添加新组件之前延迟删除前一个组件。
最终我会根据我们移动到哪个页面来制作不同的动画，因此在每个页面组件中都有onActivate。
非常感谢您的帮助！
答案 0 :(得分：0)
你可以添加一个＆＃34; EchoComponent＆＃34;在<router-outlet>所在的位置，在<canvas>中创建drawImage()，在routerOnDeactivate()上创建@Component({
template: `<canvas #canvas *ngIf="visible"></canvas>`
})
class EchoComponent {
@ViewChild("canvas") canvas;
public visible = false;
constructor(private _shared: SharedEmitterService) {
this._shared.subscribe(el => el ? this.show(el) : this.hide(el));
}
show(el) {
this.canvas.drawImage(el);
this.visible = true;
}
hide() {
this.visible = false;
}
}
@Component({...})
class PrevRoute {
constructor(private _eref: ElementRef,
private _shared: SharedEmitterService) {}
routerOnDeactivate {
this._shared.emit(this._eref.nativeElement);
}
}
@Component({...})
class NextRoute {
constructor(private _eref: ElementRef,
private _shared: SharedEmitterService) {}
routerOnActivate {
this._shared.emit(false);
}
}
...类似于：
ConnectivityManager这只是一个伪代码（从内存中编写），但它应该说明这种方法需要什么。