如何在角度 2 的不同路线之间应用不同的动画 [英] how to apply different animation between different route in angular 2
问题描述
我有一个 angular 2 的测试应用程序版本,我已经成功地在路线更改之间应用了一个动画
I have a test app build with angular 2, I have successfully applied one animation between route change
state('default', style({
opacity: 1,
transform: 'scale(1) translateY(0)'
})),
transition('void <=> default', [
style({ opacity: 0, transform: 'scale(.9) translateY(-20px)' }),
animate('.2s')
])
但是当列表页面更改为项目页面时,我也想要不同的动画,例如单击英雄列表中的英雄,所以我这样做了
But I also want a different animation when a list page change to an item page, like click a hero inside a hero-list, so I did this
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":
I tried to set the state to 'childActivated' after i click on an item and before navigation:
onHeroSelected(heroEvent: Hero) {
this.animState = "childActivate";
this.router.navigate(['/hero-detail', heroEvent.id]);
}
但没有效果.
如何在路线之间获得多个动画?
How can I get multiple animations between route?
推荐答案
将状态设置为childActivate"没有任何效果,因为组件正在下一个更改检测步骤中被销毁,因此状态会切换为 void.
Setting the state to "childActivate" has no effect, because the component is being destroyed within the next change detection step, so state switches to void instead.
>
我是这样解决这个问题的:我将路线更改延迟了 1 个进一步的更改检测周期.为此,我使用了 CanDeactivate Guard,它会监听要解决的承诺.
This is how i solved this issue: I delay the route change by 1 further change detection cycle. I use a CanDeactivate Guard for this, which listens for a promise to resolve.
查看我的 plnkr:https://embed.plnkr.co/cOeDfXCetaYuXFaZ7WeO/
Check out my plnkr: https://embed.plnkr.co/cOeDfXCetaYuXFaZ7WeO/
在路由定义中我添加:
canDeactivate: [CanDeactivateAfterChangeDetectionGuard]
这是 CanDeactivate Guard:
This is the CanDeactivate Guard:
@Injectable()
class CanDeactivateAfterChangeDetectionGuard implements CanDeactivate<WaitForChangeDetection> {
canDeactivate(component: WaitForChangeDetection): Promise<boolean> {
return component.waitForChangeDetection();
}
}
适用于任何实现此接口的组件:
which works with any component implementing this interface:
declare abstract class WaitForChangeDetection {
abstract waitForChangeDetection(): Promise<boolean>;
}
我创建了一个具有此接口默认实现的基础组件
I created a base component with a default implementation of this interface
@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();
}
}
因此您可以扩展此组件以提供与任何组件的守卫一起使用的功能.
So you can extend this component to provide the functionality to work with the guard for any component.
@Component({})
class ComponentA extends WaitForChangeDetectionImpl {
...
这篇关于如何在角度 2 的不同路线之间应用不同的动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!