Angular 角度路由动画将动态更改

我想动态更改路线动画。我在app.component.ts中有4个动画，当我单击按钮时，我将获得一些动画类型的值，根据该值我将更改动画。例如，如果我得到1，我将应用slideLeft，如果2将应用slideRight，依此类推。但是 但我无法动态更改路线动画。我正在更新动画数组，但我认为角度路由器只在第一次获取动画值。之后，即使更改了currentAnimation的值，它也不会更新动画

我的应用程序组件.ts

import { ComponentsModelService } from './components-model.service';
import { Router, NavigationEnd, NavigationStart } from "@angular/router";
import 'rxjs/add/operator/filter';
import { Component, Directive,HostBinding, HostListener, OnInit } from '@angular/core';
import {trigger, query, transition, style, animate, state, group} from '@angular/animations';


const slideToRight = [
    query(':enter, :leave', style({ position: 'fixed', left: 0, right: 0, top: 0, bottom: 0 }),{ optional: true }),
    query(':leave', style({ transform: 'translateX(0%)' }), { optional: true }),
    query(':enter', style({ transform: 'translateX(-100%)' }),{ optional: true }),
    group([
        query(':leave', [
            animate('500ms ease-in-out', style({ transform: 'translateX(100%)' })),
        ], { optional: true }),
        query(':enter', [
            animate('500ms ease-in-out', style({ transform: 'translateX(0%)' })),
        ],{ optional: true })
    ])
];

const slideToLeft = [
    query(':enter, :leave', style({ position: 'fixed', left: 0, right: 0, top: 0, bottom: 0 }),{ optional: true }),
    query(':leave', style({ transform: 'translateX(0%)' }), { optional: true }),
    query(':enter', style({ transform: 'translateX(100%)' }),{ optional: true }),
    group([
        query(':leave', [
            animate('500ms ease-in-out', style({ transform: 'translateX(-100%)' })),
        ], { optional: true }),
        query(':enter', [
            animate('500ms ease-in-out', style({ transform: 'translateX(0%)' })),
        ],{ optional: true })
    ])
];

const slideToTop = [
    query(':enter, :leave', style({ position: 'fixed', left: 0, right: 0, top: 0, bottom: 0 }),{ optional: true }),
    query(':leave', style({ transform: 'translateY(0%)' }), { optional: true }),
    query(':enter', style({ transform: 'translateY(100%)' }),{ optional: true }),
    group([
        query(':leave', [
            animate('500ms ease-in-out', style({ transform: 'translateY(-100%)' })),
        ], { optional: true }),
        query(':enter', [
            animate('500ms ease-in-out', style({ transform: 'translateY(0%)' })),
        ],{ optional: true })
    ])
];

const slideToBottom = [
    query(':enter, :leave', style({ position: 'fixed', left: 0, right: 0, top: 0, bottom: 0 }),{ optional: true }),
    query(':leave', style({ transform: 'translateY(0%)' }), { optional: true }),
    query(':enter', style({ transform: 'translateY(-100%)' }),{ optional: true }),
    group([
        query(':leave', [
            animate('500ms ease-in-out', style({ transform: 'translateY(100%)' })),
        ], { optional: true }),
        query(':enter', [
            animate('500ms ease-in-out', style({ transform: 'translateY(0%)' })),
        ],{ optional: true })
    ])
];

var currrentAnimation = slideToTop;

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    animations: [
        trigger('routeTransition', [
            transition("* => *", currrentAnimation)
        ])
    ]
})

export class AppComponent {
    ios: boolean;
    iosClass: string = "";
    previousUrl: string: "";
    count: number = 1;
    constructor(private router: Router) {
        console.log("in contrcutore");
        this.ios = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
        if(this.ios == true) {
            this.iosClass = "ios";
        }
    }
    getState(outlet) {
       return outlet.activatedRouteData.state;
    }
    changeAnimation(){

        /* Changing animation object here but it is not working */
        console.log("button clicked2222222222");
        currrentAnimation = slideToRight;
        var navigateToPage = "page3";
        this.router.navigate([navigateToPage]);
    }
};

app.component.html

<link href="https://fonts.googleapis.com/css?family=Roboto:100i" rel="stylesheet">
<!-- use the font -->
<style>
body {
    font-family: 'Maven Pro', sans-serif;
}
html, body,
main {
    position: relative;
    width: 100%;
    height: 100%;
}

</style>
<main [@routeTransition]="getState(o)">
    <router-outlet  #o="outlet"></router-outlet>
</main>
<button (click) ="changeAnimation()">Change Animation</button>

因此，无论我们从这里返回什么，都将与route'source=>destination'目标变量匹配。 那么，如果我可以更改目标变量呢

2-所以我想如果我为[@routeTransition]=“MyVariable”声明一个变量并将其更新，它应该可以工作。但它没有工作。我不知道为什么

3-所以我创建了一个设置和获取动画名称的公共服务

import { Injectable } from '@angular/core';
import {trigger, query, transition, style, animate, state, group} from '@angular/animations';

@Injectable()
export class AnimationControllerService {

  currentAnimation: any = null;
  currentAnimationId: number = -1;
  public animations: any;
  constructor() {

  }
  setCurrentAnimation(animationId) {
    var nextAnimation = "";
    var isDuplicate = false;

    switch(animationId) {
        case 1:
            nextAnimation = "slideToLeft";
            break;
        case 2:
            nextAnimation = "slideToRight";
            break;
        case 3:
            nextAnimation = "slideToTop";
            break;
        case 4:
            nextAnimation = "slideToBottom";
            break;
    }
    if(this.currentAnimation && (this.currentAnimation.indexOf("Duplicate") > -1)) {
        isDuplicate = true;
    }

    /* add duplicate if previous animation otherwise animation will not work */
    if((animationId == this.currentAnimationId) && !isDuplicate) {
        nextAnimation = nextAnimation + "Duplicate";
    }
    this.currentAnimation = nextAnimation;
    this.currentAnimationId = animationId;
  }
  getCurrentAnimation() {
    return this.currentAnimation;
  }
}

正如您所看到的，我正在设置重复的动画名称，因为我以前的动画是slideLeft，我再次希望slideLeft，那么它将不起作用，因为如果它获得不同的参数，“*=>*”将起作用

4-现在在app.component.html中

<main [@routeTransition]="getAnimation()">
    <router-outlet></router-outlet>
</main>

6-现在你可以通过简单的注入类和设置当前动画轻松导航到任何路线，然后导航到你的路线。这么简单

this.animService.setCurrentAnimation(1);
this.router.navigate([navigateToPage]);

---

你们解决了吗？是的，我用解决方案更新了问题。很好，我提出了类似的方法，并链接到这个stackoverflow，以便进一步阅读关于重复“问题”的内容。我的解决方案在这里：这个解决方案对我来说非常有效，谢谢分享！你有工作的例子吗？我用的是角度11，两种方法都不行。仅当我返回outlet.activatedRoute.routeConfig.path时才会触发路由动画。

import { AnimationControllerService } from './animationcontroller.service';
import { Component, Directive,HostBinding, HostListener, OnInit } from '@angular/core';
import 'rxjs/add/operator/filter';
import {trigger, query, transition, style, animate, state, group} from '@angular/animations';

const slideToRight = // animation code same as question
const slideToLeft = // animation code same as question

const slideToTop =// animation code same as question

const slideToBottom = // animation code same as question


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    animations: [
        trigger('routeTransition', [
            transition("* => slideToLeft", slideToLeft),
            transition("* => slideToRight", slideToRight),
            transition("* => slideToTop", slideToTop),
            transition("* => slideToBottom", slideToBottom),
            transition("* => slideToLeftDuplicate", slideToLeft),
            transition("* => slideToRightDuplicate", slideToRight),
            transition("* => slideToTopDuplicate", slideToTop),
            transition("* => slideToBottomDuplicate", slideToBottom),
        ])
    ],
})

export class AppComponent {
    ios: boolean;
    iosClass: string = "";
    constructor(private animService: AnimationControllerService) {

    }
    getAnimation() {
        return this.animService.getCurrentAnimation();
    }
};

this.animService.setCurrentAnimation(1);
this.router.navigate([navigateToPage]);