BrowserAnimationsModule 和 NoopAnimationsModule 有什么区别? [英] What's the difference between BrowserAnimationsModule and NoopAnimationsModule?

问题描述

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

With the new Angular-Material release, you need to add a module for Angular-Animations. You can choose between two BrowserAnimationsModule and NoopAnimationsModule. The official guide states:

某些 Material 组件依赖于 Angular 动画模块以便能够进行更高级的转换.如果你想要这些动画要在您的应用程序中运行，您必须安装@angular/animations 模块并在其中包含 BrowserAnimationsModule您的应用.

Some Material components depend on the Angular animations module in order to be able to do more advanced transitions. If you want these animations to work in your app, you have to install the @angular/animations module and include the BrowserAnimationsModule in your app.

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

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

如果您不想向项目添加另一个依赖项，可以使用 NoopAnimationsModule.

If you don't want to add another dependency to your project, you can use the NoopAnimationsModule.

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

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

我不太明白这里有什么区别.好像完全一样 :) 这两个模块有什么区别?

I don't quite get what is the difference here. Seems to be exactly the same :) What's the difference between the two modules?

推荐答案

正如名称 noop(无操作")所说，该模块不执行任何操作.它是一个实用模块，它模拟真正的动画模块但实际上并不动画.

As the name noop ("no operation") says, that module doesn't do anything. It is a utility module that mocks the real animation module but doesn't actually animate.

这在动画太慢的平台上非常有用，或者用于测试(单元、集成、e2e 与 Cypress、Protractor 等)，如果动画不涉及您实际想要测试的内容.

This can be handy on platforms where animation would be too slow, or for testing (unit, integration, e2e with Cypress, Protractor, ...) , if animation isn't involved in what you actually want to test.

@NgModule({
  imports: [
    BrowserModule,
    environment.production ? BrowserAnimationsModule : NoopAnimationsModule,
    ...
   ]
   ...
}
export class AppModule {}

这篇关于BrowserAnimationsModule 和 NoopAnimationsModule 有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！