Angular 6 路由器过渡

Question

目前在设置路由器转换时遇到一个奇怪的问题，我似乎无法理解，目前在 angular 6

appComponent.html 文件:

<navigation-component></navigation-component>
<loading-screen [@fadeAnimation]="prepareRoute(outlet)">
  <router-outlet #outlet="outlet"></router-outlet>
</loading-screen>
<footer-component></footer-component>

loadingScreenAnim.ts 文件:

export const loading_screen_anim =
  trigger('fadeAnimation', [
    transition('* <=> *', [
      query(':enter, :leave',
        [
           style({opacity: 0, position: 'fixed', width: '100vw', background:'#ffff', height: '100vh', 'z-index' : 10}),
        ],
      ),
        query(':enter',[
            animate('300ms ease',
            style({
                opacity:1,
            })
            )
        ])      
    ])
  ]);

appComponent.ts 文件:

@Component({
  selector: 'root',
  template:require('./app.component.html'),
  animations: [loading_screen_anim],
})
export class AppComponent {
  title = 'pogo-ng6';
  pagecontent:any;

  constructor(){
  }


  public prepareRoute(routerOutlet: RouterOutlet) {
    const routeData = routerOutlet.activatedRouteData['animation'];
    return routeData ? routeData : 'rootPage';

  }

}

和相对 css:

/deep/ router-outlet~* {
    position: absolute;
    width: 100%;
    height: 100%;
}

有什么我不明白为什么动画目前没有触发，我也找到了解决方案但是它干扰了我的页脚。

Answer 1

我尝试在 HTML 中的 routeroutlet 上对您的 stackblitz 进行如下更改，并且您的 fadeAnimation 有效：

<main [@fadeAnimation]="routerOutlet.isActivated ? routerOutlet.activatedRoute : ''">
  <router-outlet #routerOutlet="outlet"></router-outlet>
</main>

当路由被激活时，它会触发动画。使用此技术时，app.component.ts 中的这段代码不是必需的：

  //  public prepareRoute(routerOutlet: RouterOutlet) {
  //   const routeData = routerOutlet.activatedRouteData['animation'];
  //   return routeData ? routeData : 'rootPage';

Angular 6 路由器过渡

Angular 6 router transition

angular

animation

transition

router