Javascript 角度动画在Visual Studio 2017模板中不起作用

我在通过Visual Studio 2017使用Angular 2制作动画时遇到问题。我想这里缺少一些简单的东西，但我看不到。我想动画中的一些元素，并正在测试动画使用一个按钮上的点击事件，但没有发射

我的app.shared.module.ts是

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/shared/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { ContactComponent } from './components/shared/contact/contact.component';
import { HeroComponent } from './components/shared/hero/hero.component';
import { FooterComponent } from './components/shared/footer/footer.component';

@NgModule({
    declarations: [
        AppComponent,
        NavMenuComponent,
        HomeComponent,
        ContactComponent,
        HeroComponent,
        FooterComponent
    ],
    imports: [
        CommonModule,
        HttpModule,
        FormsModule,
        NoopAnimationsModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModuleShared {
}

我的component.html是

<div class="hero">
    <div class="colour-overlay"></div>
    <div class="row">
        <div class="col-md-6">
            <h2 [@fadeInAnimation]="state">TEST1</h2>

            <button (click)="toggleMove()">Click Me!</button>
        </div>

        <div class="col-md-6">
            <contact></contact>
        </div>
    </div>

</div>

最后是动画

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

export const fadeInAnimation =
    trigger('fadeInAnimation', [
        transition('void => *', [
            state('active', style({
                opacity: 1,
                transformX: 'transformX(0)'
            })),
            state('inactive', style({
                opacity: 0,
                transformX: 'transform(-100%)'
            })),
            transition('active => inactive', animate('300ms ease-out')),
            transition('inactive => active', animate('300ms ease-in'))
        ]),

    ]);

有人能指出我在这里做错了什么吗？

因为您添加了，这将禁用整个应用程序中的所有动画。不过，您应该在主应用程序模块中添加BrowserAnimationsModule

@NgModule({
    declarations: [
        ...
    ],
    imports: [
        CommonModule,
        HttpModule,
        FormsModule,
        // NoopAnimationsModule, //<- remove this
        BrowserAnimationsModule, //<- add this
        RouterModule.forRoot([...])
    ]
})
export class AppModuleShared {
}

---

嗨，潘卡吉。请问这两个图书馆有什么不同？当我添加这个时，我得到一个文档错误？因此，我选择了这一款好吧，我看到了这个问题，很好地解释了区别

@NgModule({
    declarations: [
        ...
    ],
    imports: [
        CommonModule,
        HttpModule,
        FormsModule,
        // NoopAnimationsModule, //<- remove this
        BrowserAnimationsModule, //<- add this
        RouterModule.forRoot([...])
    ]
})
export class AppModuleShared {
}