Angular 4 - 使用角度动画淡化路线变化

Question

问题： Angular 4 - 使用角度动画淡化路线变化

问题：

目前，视图在网站的加载中淡出，但在路线更改时不会。 我也希望视图在路线更改时始终淡入。

这是我的 HTML：（可能问题在这里？？？）

  <div class="page" [@fadeInTransition]>
    <router-outlet></router-outlet>
  </div>

这是我的应用组件：

import { Component, HostBinding  } from "@angular/core";
import { Router, ActivatedRoute } from "@angular/router";
import { MetadataService } from 'ng2-metadata/index';

import { fadeAnimation } from "./animations/fade.animation";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  animations: [fadeAnimation()] 
})

export class AppComponent {
    @HostBinding('@fadeInTransition') fadeInTransition;

    constructor(private route: ActivatedRoute, private router: Router, private metadataService: MetadataService) {
    }
}

这是我的动画（我导入的）：

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

export function fadeInAnimation() {
    return trigger('fadeInTransition', [
        transition(':enter', [
            style({ opacity: 0 }),
            animate('2s', style({ opacity: 1 }))
        ])
    ]);
}

Answer 1

这不是 DRY 但是.. 将以下内容添加到每个组件的工作中。

import { fadeAnimation } from "./animations/fade.animation";

@Component({
  selector: "app-some-other-component",      
  animations: [fadeAnimation()] 
})

@HostBinding('@fadeInTransition') fadeInTransition;