내 경로 애니메이션이 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-cli를 사용하여 Angular 4를 사용하고 있습니다.

Answer 1

는 불만 요소에서 대체하려고 :

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

구성 요소 정의에

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

와 함께.

코드를 사용하여 샘플 프로젝트를 만들었고 저에게 적합합니다.