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 }))
    ]),
]);

我想在显示组件时添加动画（淡入）。我看到我的路由工作正常，但它并没有淡入。我已将动画时间设置为5秒，但我的组件立即加载，忽略了完整的事务。

我在这里缺少什么？

我正在使用Angular 4，使用angular-cli。

Answer 1

尝试替换投诉组件：

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

与

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

在组件定义中。

我使用您的代码制作了一个示例项目，这对我有用。

为什么我的路线动画在Angular2中不起作用？

1 个答案: