ルートアニメーションがAngular2で機能しないのはなぜですか？

Question

App.module：

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from "@angular/http"; 
import { BrowserAnimationsModule} from '@angular/platform-browser/animations'; 

import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { CreateComplaintComponent } from './create-complaint/create-complaint.component'; 
import { ComplaintService } from './Complaints/ComplaintService'; 
import { NcrToasterService } from './toaster/NcrToasterService'; 
import { ToasterModule } from 'angular2-toaster'; 
import { ComplaintOverviewComponent } from './complaint-overview/complaint-overview.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    CreateComplaintComponent, 
    ComplaintOverviewComponent 
    ], 
    imports: [ 
    BrowserModule, 
    AppRoutingModule, 
    FormsModule, 
    HttpModule, 
    BrowserAnimationsModule, 
    ToasterModule 
    ], 
    providers: [ 
    ComplaintService, 
    NcrToasterService 
    ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { } 

ルーティングモジュール：

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { CreateComplaintComponent } from './create-complaint/create-complaint.component'; 
import { ComplaintOverviewComponent } from './complaint-overview/complaint-overview.component'; 

const routes: Routes = [ 
    { 
     path: 'create', 
     component: CreateComplaintComponent 
    }, 
    { 
     path: 'overview', 
     component: ComplaintOverviewComponent 
    }, 
    { 
     path: '', 
     redirectTo: '/create', 
     pathMatch: 'full' 
    }, 
]; 

@NgModule({ 
imports: [RouterModule.forRoot(routes)], 
exports: [RouterModule] 
}) 
export class AppRoutingModule { } 

苦情・コンポーネントを作成します。

import { Injectable, animate, transition, trigger, state, style, HostBinding } from '@angular/core'; 
import { Component, OnInit, ViewEncapsulation } from '@angular/core'; 
import { Complaint, ComplaintType } from '../Complaints/Complaint'; 
import { ComplaintService} from '../Complaints/ComplaintService'; 
import { NcrToasterService } from '../toaster/NcrToasterService'; 
import { ToasterConfig } from 'angular2-toaster'; 
import { Router } from '@angular/router'; 
import { fadeInAnimation } from "../animations"; 

@Component({ 
    moduleId: module.id.toString(), 
selector: 'app-create-complaint', 
templateUrl: './create-complaint.component.html', 
styleUrls: ['./create-complaint.component.less'], 
encapsulation: ViewEncapsulation.None, 
animations: [fadeInAnimation], 
}) 

export class CreateComplaintComponent { 
    @HostBinding('@fadeInAnimation')fadeInAnimation=true; 
    private complaint: Complaint; 
    private ComplaintType: typeof ComplaintType = ComplaintType; 
    private ToasterConfig : ToasterConfig; 

    constructor(private complaintService: ComplaintService, 
       private toaster : NcrToasterService, 
       private router: Router) { 
     this.complaint = new Complaint();  
    } 
} 

Animations.ts

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

export const fadeInAnimation = 
// trigger name for attaching this animation to an element using the [@triggerName] syntax 
trigger('fadeInAnimation', [ 

    // route 'enter' transition 
    transition(':enter', [ 

     // css styles at start of transition 
     style({ opacity: 0 }), 

     // animation and styles at end of transition 
     animate('5s', style({ opacity: 1 })) 
    ]), 
]); 

を私はAを追加したいですコンポーネントが表示されているときのフェードイン（フェードイン）。ルーティングが効いているのが見えますが、フェードインしません。私はアニメーション時間を5秒に設定しましたが、コンポーネントは即座にロードされ、完全なトランザクションは無視されます。

私はここで何が欠けていますか？

私はAngular 4を使用していますが、angle-cliを使用しています。

コンポーネント定義で

host: { '[@fadeInAnimation]': '' } 

で

@HostBinding('@fadeInAnimation') fadeInAnimation = true; 

：

Answer 1

は苦情コンポーネントに置き換えるようにしてください。

私はあなたのコードを使ってサンプルプロジェクトを作ってくれました。