63

在新的 Angular-Material 版本中，您需要为 Angular-Animations 添加一个模块。您可以在两个 BrowserAnimationsModule 和 NoopAnimationsModule 之间进行选择。官方指南指出：

一些 Material 组件依赖于 Angular 动画模块，以便能够进行更高级的转换。如果您希望这些动画在您的应用程序中工作，您必须安装 @angular/animations 模块并将 BrowserAnimationsModule 包含在您的应用程序中。

npm install --save @angular/animations
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }

如果您不想在项目中添加其他依赖项，可以使用 NoopAnimationsModule。

import {NoopAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [NoopAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }

我不太明白这里有什么区别。似乎完全一样 :) 这两个模块有什么区别？

4

2 回答 2

122

正如名称noop（“无操作”）所说，该模块不做任何事情。它是一个模拟真实动画模块但实际上并不动画的实用模块。

这在动画太慢的平台上很方便，或者对于测试（单元，集成，与赛普拉斯的 e2e，量角器，...），如果动画不涉及您实际想要测试的内容。

@NgModule({
  imports: [
    BrowserModule,
    environment.production ? BrowserAnimationsModule : NoopAnimationsModule,
    ...
   ]
   ...
}
export class AppModule {}
于 2017-04-12T07:23:20.687 回答
16

BROWSER_ANIMATIONS_PROVIDERS用于实际应用

将提供程序与实际模块分开，以便我们可以在 Google3 中进行本地修改以将它们包含在 BrowserModule 中。

BROWSER_NOOP_ANIMATIONS_PROVIDERS用于测试

将提供程序与实际模块分开，以便我们可以在 Google3 中进行本地修改以将它们包含在 BrowserTestingModule 中。

于 2017-04-12T07:24:54.247 回答